我正试图向另一位工程师解释Reaction StrictMode是如何工作的--特别提到了双重渲染、间隔和Use Effect清理.
以以下简单的计数器组件为例:
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount((old) => old + 1);
}, 3000);
return () => clearInterval(id);
}, []);
console.log("RE_RENDERING");
return <div>{count}</div>;
};
然后将其挂载到使用StrictMode的应用程序中:
export default function App() {
return (
<StrictMode>
<Counter />
</StrictMode>
);
}
我们了解严格模式导致对触发效果做出react ，并且渲染两次，并且
react 始终在下一次渲染效果之前清除上一次渲染的效果.
(逐字引用自https://react.dev/learn/synchronizing-with-effects).
我正在努力解释的是，为什么控制台日志(log)"RE_RENDERING"仍然每3秒以2为一批触发--即使我们正在清理setInterval作为useEffect()的一部分.例如，应该清理在第一个渲染中创建的setInterval，只留下第二个间隔.
当然，当我们移除<StrictMode>-"RE_RENDERING"时，每隔3秒可靠地emits 一次.我只能假设状态Mutations ，以某种方式触发了第二个setInterval的创建，但它没有被清理-但我不知道如何解释为什么或如何发生这种情况.