React的Effect Hook解决函数组件的性能问题和潜在bug！

Posted 2023-03-14

参考技术A

Hook 是以 use 开头的特殊函数，让 函数组件 拥有 calss组件 的某些特性。Effect Hook 就是指 useEffect 这个特殊函数，它让 函数组件 能在渲染完成后执行自定义操作。

useEffect 中要谨慎使用 useState ，因为它会触发组件渲染后，再次调用 useEffect，形成一个死循环。正确方式：用条件语句包裹 useState 方法，定义了退出条件，避开死循环。

让组件只监控特定数据的变更，再进行渲染后的操作，忽略不必要的操作，很好的优化了组件性能。

只有一个参数，每一次组件渲染完成后 且 在下一次渲染前 被调用。

有两个参数，第二个参数是空数组( [] ) 。在组件首次加载渲染完成后被调用，且只被调用这一次。

有两个参数，第二个参数是数组。只有当数组里面的值改变时， useEffect 才会被调用。

useEffect 被调用时，执行了一些操作（譬如设定了一个定时器、访问了一些网络资源），在组件卸载时，必须做一些清除操作来防止内存泄露等问题。

解决方案：只需要在 useEffect 中返回一个清除函数，React会在组件卸载之前调用清除函数。

useEffect 没有指定依赖，意味着 useEffect 只会运行一次，其内部获取到的 count 永远是初始值0，导致页面 中的 <h1>count</h1> 值，永远是1。

在 useEffect 中添加 count 依赖，这样每一次 useEffect 执行 setCount 带来count的变化，都会使得 useEffect 再次被调用，可以解决问题，但是这样会带来另一个问题，每一次执行 useEffect 都会清除计时器，再重新设置计时器，这不是我们想要的。

采用 setState 的更新特性，让 setCount 自己去获取和更新 count，让 useEffect 完全脱离对 count 的依赖，实现最终理想效果。

使用 useRef 和 useEffect 来实现，仅当你实在找不到更好办法的时候才这么做，因为依赖于变更会使得组件更难以预测。

useEffect 会在组件完全渲染完后被调用执行，此时执行的 useEffect ，如果涉及到可见DOM变更，就可能给客户带来视觉上的跳跃感，此时可以考虑使用 useLayoutEffect ，使用方式跟 useEffect 完全一样，只是被调用的时机不同。