react hooks 如何有效的解决闭包问题?

作者站长头像
站长
· 阅读数 6

请教一下,闭包在 react 中不注意就会产生,尤其是传递 方法的时候,有什么解决闭包的方法吗?

回复
1个回答
avatar
test
2024-06-30

1.用依赖数组:在 useEffect 或者 useCallback 里,可以通过提供一个依赖数组来通知 React 哪些变量的变化应该触发函数的重新执行。

useEffect(() => {
  // 函数会在 count 变化时重新执行
  console.log(count);
}, [count]);

2.用 ref 在整个组件生命周期内保持不变,但它的 current 属性可以存储可变的值。

const countRef = useRef(count);
countRef.current = count;

useEffect(() => {
  const id = setInterval(() => {
    console.log(countRef.current); //引用最新的 count
  }, 1000);
  return () => clearInterval(id);
}, []); // 空依赖数组,函数只在组件挂载时执行一次

3。用函数式更新:

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

// 错误的更新方式,可能会引用旧的 count
const increment = () => setCount(count + 1);

// 正确的更新方式,总是基于最新的 count
const increment = () => setCount(prevCount => prevCount + 1);
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容