DEV Community
·
React：清理函数运行的频率有多高？
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
React 组件的状态变量更新会导致重新渲染，并调用清理函数。清理函数在组件卸载时执行，且与状态变量关联时可能多次调用。使用 useEffect 时需谨慎，以避免意外多次执行清理函数。
🎯
关键要点
- React 组件的状态变量更新会导致重新渲染，这是 React 的核心特性。
- 组件提供清理函数，在组件卸载时触发，可能会多次调用。
- 清理函数与状态变量关联时，状态变量更新会导致清理函数被多次调用。
- 使用 useEffect 时需谨慎，特别是当它与状态变量关联时。
- 在示例中，useEffect 绑定到 counter，更新 counter 时会调用清理函数。
- 清理函数在组件卸载时执行，可能在状态变量更新时多次执行。
- 在开发者工具中可以观察到组件的挂载和卸载日志。
- 清理函数常用于报告组件完成后的状态，但需注意与状态变量的关联。
- 可以在一个组件中使用多个 useEffect 钩子，分别处理不同的副作用和清理函数。
- 清理函数在组件卸载时调用，或在状态变量更新时根据需要多次调用。
➡️
