1. 前言
1.react 闭包陷阱比较重要,在实际开发中可能经常遇到,所以单独开篇来聊聊
2. 是什么 what
- 在 React 中，闭包陷阱指的是在使用
循环或迭代时，创建闭包函数时捕获了循环变量的值，导致在后续的回调函数中访问到的变量值不是预期的值。这可能会导致意外的行为或 bug
解决方案
- 为了解决闭包陷阱的问题，可以通过正确设置
依赖数组来确保在回调函数中使用的状态和 props 始终是最新的值。- 如果回调函数中使用了组件的状态或 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> ); } }
- 当点击按钮时，会执行 handleClicks 函数，在循环中创建了多个 setTimeout 的回调函数。
- 由于 JavaScript 中没有块级作用域，而是函数作用域，因此回调函数中的 i 是共享的变量，而不是每个迭代中的局部变量。
- 当回调函数被执行时，循环已经执行完毕，此时的 i 的值已经是 this.state.items.length。
- 因此在回调函数中访问 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节点就对应的是一个组件
- 对于
classComponent而言，有 state 是一件很正常的事情，Fiber对象上有一个 memoizedState 用于存放组件的 state。hooks所针对的 `FunctionComponnet``。- 无论开发者怎么折腾，一个对象都只能有一个 state 属性或者
memoizedState属性，可是，谁知道开发者们会在FunctionComponent里写上多少个useState，useEffect 等等 ?- 所以，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，应该将其添加到依赖数组中，以便在它们发生变化时触发回调函数的更新
