React自定义Hook中ignore布尔变量的作用及清理设置原因问询

这个变量的核心目的就是防止无效的状态更新，解决React组件中异步请求常见的竞态问题，下面拆解说清楚：

为什么需要它？ #

在React里，组件可能会因为url变化重新渲染，或者直接被卸载。但你发起的fetch请求是异步的，不会跟着组件状态变化或卸载立刻停止。如果不管它，等请求完成后调用setData，就会出问题：

• 要是组件已经卸载了，更新状态会触发React的警告（"Can't perform a React state update on an unmounted component"）
• 要是url已经变了，旧请求的结果晚于新请求返回，会把新的正确数据覆盖掉，页面显示错误内容

ignore变量怎么工作？ #

• ignore是在useEffect内部声明的局部变量，初始值false，代表当前这个fetch请求是“有效”的，完成后可以更新状态
• useEffect返回的函数是清理函数，当url变化导致useEffect重新执行，或者组件卸载时，这个清理函数会先被调用，把ignore设为true，标记旧请求已经“失效”
• 等fetch的异步回调（就是.then(json => ...)那部分）触发时，先检查ignore的值：如果是true，就跳过setData，不更新状态；如果是false，就正常更新

举个实际例子 #

比如你在组件里快速切换请求地址：从/api/posts/1切到/api/posts/2

1. 第一次useEffect执行，发起/api/posts/1的请求，此时ignore = false
2. 你很快切换到/api/posts/2，React会先执行上一次useEffect的清理函数，把ignore改成true
3. 接着执行新的useEffect，发起/api/posts/2的请求
4. 假设/api/posts/1的请求后来才完成，此时ignore已经是true，就不会调用setData，避免旧数据覆盖新请求的结果

这样就能保证只有当前有效的请求结果才会更新组件状态，避免了不必要的错误和渲染。

内容的提问来源于stack exchange，提问作者Nesh