防止 useEffect hook 在 ComponentDidMount（） 上运行

Question

此代码在更改时运行（应该如此），但它也会在组件首次加载时运行。如何让它仅在后续更改时运行，而不是在第一次设置默认值时运行？namename

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。在我看来，这是一种有点黑客的方式，但它有效 -returnconst [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