阻止useEffect挂钩在ComponentDidMount（）上运行

Question

此代码在更改name时运行（应如此），但在组件首次加载时也运行。我如何才能让它仅在随后对name的更改而不是第一次设置默认值的情况下运行？

const [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的InputMethodManager inputManager = (InputMethodManager) getApplication().getSystemService(Context.INPUT_METHOD_SERVICE); inputManager.hideSoftInputFromWindow(getWindow().getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS); 。在我看来，这是一种有点怪异的方法，但是它可以工作-

return

现在，仅当依赖项const [name, setName] = useState(''); useEffect(() => { //don't do anything on initial render return () => { alert('Hi ' + 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