默认情况下,Effect 在每次渲染(包括初始渲染)后运行。
如果 React 的所有依赖项都与上次渲染时的值相同,则将跳过本次 Effect。
useEffect(() => {// 这里的代码会在每次渲染后执行
});useEffect(() => {// 这里的代码只会在组件挂载后执行return () =>{// 这里的 cleanup 清理函数,在组件卸载时执行}
}, []);useEffect(() => {//这里的代码只会在每次渲染后,并且 a 或 b 的值与上次渲染不一致时执行return () =>{// cleanup 清理函数// 1. 在 React 执行该 Effect 之前,它会执行最近一次渲染的 Effect cleanup 函数。// 2. 在组件卸载时执行}
}, [a, b]);
不必使用 Effect 来转换渲染所需的数据
当更新 state 时 (setState):
- React 首先会调用组件函数来计算应该显示在屏幕上的内容(渲染)
- 然后会把这些变化“提交”到 DOM 中来更新屏幕(提交)
- 然后 React 会执行 Effect
- 如果 Effect 中 也立即更新了 state,就会重新执行整个流程。
为了避免不必要的渲染流程,应在组件顶层转换数据。这些代码会在你的 props 或 state 变化时自动重新执行。