反应挂钩 useEffect 仅在更新时？

Question

如果我们想限制 useEffect 仅在组件挂载时运行，我们可以添加 useEffect 的第二个参数 [] 。

 useEffect(() => {
  // ...
}, []);

但是我们如何才能使 useEffect 只在组件更新时运行，除了初始挂载？

原文由 koo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您希望 useEffect 仅在除初始挂载之外的更新上运行，您可以使用 — 使用 useEffect useRef 来跟踪 initialMount，而无需第二个参数。

 const isInitialMount = useRef(true);

useEffect(() => {
  if (isInitialMount.current) {
     isInitialMount.current = false;
  } else {
      // Your useEffect code here to be run on update
  }
});

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我非常喜欢 Shubham 的回复，所以我将其设为自定义 Hook

 /**
 * A custom useEffect hook that only triggers on updates, not on initial mount
 * @param {Function} effect
 * @param {Array<any>} dependencies
 */
export default function useUpdateEffect(effect, dependencies = []) {
  const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      return effect();
    }
  }, dependencies);
}

原文由 Mario Campa 发布，翻译遵循 CC BY-SA 4.0 许可协议