useEffect 的相互竞争
在 React 的项目中我们经常会使用 useEffect 这个hook 去处理组件中的 SideEffect,为确保的组件在每次渲染时都得到同样的数据,React 在开发模式下会对每个 useEffect 函数执行2 次。这种情况如果我们没有正确清除 useEffect 带来的 SideEffect 的话就会形成一种相互竞争 或者 Race Condition。比如下面的例子:
const Com = ({timeout, text}) => {
const ref = useRef()
useEffect(() => {
setTimeout(() => {
ref.textContent = text;
}, timeout)
}, [timeout])
return (
)
}
当父级组件传入不同的值 3000, 3000ms 和 2000,2000ms时,组件会先显示 2000ms 然后3000ms而不是我们设想的只显示2000ms。
解决上面问题的方式就是在 useEffect 被清除的时候我们