防止 useEffect hook 在 ComponentDidMount（） 上运行

Question

此代码在更改时运行（应该如此），但它也会在组件首次加载时运行。如何让它仅在后续更改时运行，而不是在第一次设置默认值时运行？namenameconst [name, setName] = useState('');useEffect(() => {  alert('Hi ' + name);}, [name]);

Answer 1

使用 ref，您可以跟踪第一个渲染，在第一个渲染后设置为 false。

const firstRenderRef = useRef(true);

const [name, setName] = useState('');

useEffect(() => {

  if (firstRenderRef.current) {

    firstRenderRef.current = false;

  } else {

    alert('Hi ' + name);

  }

}, [name]);

不过，我会把它分解成一个自定义的钩子。

const useSkipFirstEffect = (callback, dependencies) => {

  const firstRenderRef = useRef(true);

  useEffect(() => {

    if (firstRenderRef.current) {

      firstRenderRef.current = false;

    } else {

      callback();

    }

  }, [callback, ...dependencies]);

};

用法：

useSkipFirstEffect(() => {

  alert('SkipFirstEffect: Hi ' + name);

}, [name]);

Answer 2

有一些方法可以跳过初始渲染的效果（如ref和使用变量）。我通常使用并发现最简单的方法是使用useEffect。在我看来，这是一种有点黑客的方式，但它有效 -return

const [name, setName] = useState('');

useEffect(() => {

  //don't do anything on initial render

  return () => {

      alert('Hi ' + name);

   }

}, [name]);

现在，仅当依赖项发生更改时，才会运行此功能。我不确定它是否被推荐，但它总是为我工作，没有任何问题。离开这里以防万一。name

注意：：这也将在组件卸载更改时运行。为了防止这种情况，您可以只使用检查。

Answer 3

这导致自定义钩子多次重新运行，因为您正在依赖项数组中重新创建一个新数组，我会像这样更改它：[callback, ...dependencies]

import { useEffect, useRef } from 'react'

function useEffectSkipFirst(callback, dependencies) {

  const firstRenderRef = useRef(true)

  useEffect(() => {

    if (firstRenderRef.current) {

      firstRenderRef.current = false

      return

    }

    callback()

  }, dependencies)

}

export default useEffectSkipFirst