useEffect 运行一次挂钩答案

【问题标题】：useEffect run once hookuseEffect 运行一次挂钩
【发布时间】：2021-10-19 04:28:33
【问题描述】：

我找到了这个库https://react-hooks.org/docs/useeffectoncewhen，但我很困惑。为什么它甚至存在以及它的用途是什么？难道我不能用 useEffect 达到同样的效果吗？

useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 3000); // Countdown for 3 sec
  }, [])

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

你可以用useEffect做同样的事情：

“如果你想运行一个效果并且只清理一次（在挂载和卸载时），你可以传递一个空数组（[]）作为第二个参数”

Docs

您还可以提供一个依赖项列表，如果它们发生变化，它们会触发再次运行的效果。

useEffect( () => { doSomething() } , [ifThisChangesRunFuncAgain, orThis, ...] )

【讨论】：

【解决方案2】：

钩子是useEffectOnceWhen，而不仅仅是useEffectOnce。根据您链接的来源：

当条件成立时，最多运行一次回调效果

Here's the source code of that hook:

/**
 * useEffectOnceWhen hook
 *
 * It fires a callback once when a condition is true or become true.
 * Fires the callback at most one time.
 *
 * @param callback The callback to fire
 * @param when The condition which needs to be true
 */
function useEffectOnceWhen(callback: () => void, when: boolean = true): void {
  const hasRunOnceRef = useRef(false);
  const callbackRef = useRef(callback);
  useEffect(() => {
    callbackRef.current = callback;
  });
  useEffect(() => {
    if (when && !hasRunOnceRef.current) {
      callbackRef.current();
      hasRunOnceRef.current = true;
    }
  }, [when]);
}

正如你所看到的，它比仅仅在钩子开始时被调用一次更高级：一旦传入的条件第一次变为真，它就会被调用。

【讨论】：

我什么时候需要这个？演示代码可以替换为useEffect