typescript - react hooks 如何有效的解决闭包问题？

问题描述：

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

第 1 个答案：

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);

第 2 个答案：

没有踩过这个坑的。不算使用过react。

使用MediaSource播放音频流，监听audio的ended无法触发<audio id="audios"></audio>const aud ...