1. 前言

1.react 闭包陷阱比较重要,在实际开发中可能经常遇到,所以单独开篇来聊聊

---

2. 是什么 what

1. 在 React 中，闭包陷阱指的是在使用循环或迭代时，创建闭包函数时捕获了循环变量的值，导致在后续的回调函数中访问到的变量值不是预期的值。这可能会导致意外的行为或 bug

---

解决方案

1. 为了解决闭包陷阱的问题，可以通过正确设置依赖数组来确保在回调函数中使用的状态和 props 始终是最新的值。
2. 如果回调函数中使用了组件的状态或 props，应该将其添加到依赖数组中，以便在它们发生变化时触发回调函数的更新

---

闭包陷阱实例

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['A', 'B', 'C'],
    };
  }

  handleClicks() {
    for (var i = 0; i < this.state.items.length; i++) {
      setTimeout(function () {
        console.log(this.state.items[i]); // 问题：输出 undefined
      }, 1000);
    }
  }

  render() {
    return (
      <button onClick={this.handleClicks.bind(this)}>
        Click Me
      </button>
    );
  }
}

1. 当点击按钮时，会执行 handleClicks 函数，在循环中创建了多个 setTimeout 的回调函数。

2. 由于 JavaScript 中没有块级作用域，而是函数作用域，因此回调函数中的 i 是共享的变量，而不是每个迭代中的局部变量。

3. 当回调函数被执行时，循环已经执行完毕，此时的 i 的值已经是 this.state.items.length。

4. 因此在回调函数中访问 this.state.items[i] 时，会导致访问到未定义的值。

---

3. 解决闭包陷阱

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClicks = () => {
    for (var i = 0; i < count; i++) {
      (function (index) {
        setTimeout(function () {
          console.log(index); // 正确输出：0、1、2、...
        }, 1000);
      })(i);
    }
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={handleClicks}>Click Me</button>
    </div>
  );
}

---

总结

0 . react的Fiber架构，其实可以认为一个 Fiber节点就对应的是一个组件

1. 对于 classComponent 而言，有 state 是一件很正常的事情，Fiber对象上有一个 memoizedState 用于存放组件的 state。

2. hooks 所针对的 `FunctionComponnet``。
3. 无论开发者怎么折腾，一个对象都只能有一个 state 属性或者 memoizedState 属性，可是，谁知道开发者们会在 FunctionComponent 里写上多少个useState，useEffect 等等 ?
4. 所以，react用了链表这种数据结构来存储FunctionComponent里面的hooks

• 使用立即执行函数的方式，我们可以避免函数式组件中的闭包陷阱问题，确保回调函数中访问到的变量值是预期的

---

4. 闭包陷阱的解决方案-依赖项

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 错误示例：没有添加 count 到依赖数组
    console.log(count); // 打印的是旧的 count 值
  }, []);

  useEffect(() => {
    // 正确示例：添加 count 到依赖数组
    console.log(count); // 打印的是最新的 count 值
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default MyComponent;

为了解决闭包陷阱的问题，可以通过正确设置依赖数组来确保在回调函数中使用的状态和 props 始终是最新的值。

如果回调函数中使用了组件的状态或 props，应该将其添加到依赖数组中，以便在它们发生变化时触发回调函数的更新

---

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉