react闭包陷阱及解决方案
2023-07-02 本文已影响0人
云高风轻
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，应该将其添加到依赖数组中，以便在它们发生变化时触发回调函数的更新
