reactjs - 当有多个 useEffect 时，跳过第一个 useEffect

Question

要限制 useEffect 在第一个渲染上运行，我们可以这样做:

  const isFirstRun = useRef(true);
  useEffect (() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    console.log("Effect was run");
  });

根据此处的示例:https://stackoverflow.com/a/53351556/3102993

但是如果我的组件有多个 useEffects，每个 useEffects 处理不同的 useState 更改怎么办？我尝试在另一个 useEffect 中使用 isFirstRun.current 逻辑，但由于一个返回，另一个仍然在初始渲染上运行。

一些背景:

const Comp = () => {
const [ amount, setAmount ] = useState(props.Item ? Item.Val : 0);
const [ type, setType ] = useState(props.Item ? Item.Type : "Type1");

useEffect(() => {
    props.OnAmountChange(amount);
}, [amount]);

useEffect(() => {
    props.OnTypeChange(type);
}, [type]);

return {
    <>
        // Radio button group for selecting Type
        // Input field for setting Amount
    </>
}
}

我为每个使用单独的 useEffects 的原因是因为如果我执行以下操作，它不会更新金额。

useEffect(() => {
    if (amount) {
        props.OnAmountChange(amount);
    } else if (type) {
        props.OnTypeChange(type)
    }
}, [amount, type]);

Answer 1

据我了解，您需要控制首次挂载和连续重新渲染时 useEffect 逻辑的执行。您想跳过第一个 useEffect。效果在组件渲染后运行。

因此，如果您使用此解决方案:

const isFirstRun = useRef(true);
  useEffect (() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    console.log("Effect was run");
  });
   useEffect (() => {
    // second useEffect
    if(!isFirstRun) {
        console.log("Effect was run");
     }
   
  });

因此，在这种情况下，一旦 isFirstRun ref 设置为 false，对于所有连续效果，isFirstRun 的值都会变为 false，因此所有效果都会运行。

您可以做的是，使用诸如 useMount 自定义 Hook 之类的东西，它可以告诉您这是第一次渲染还是连续重新渲染。下面是示例代码:

const {useState} = React

function useMounted() {
  const [isMounted, setIsMounted] = useState(false)


  React.useEffect(() => {
    setIsMounted(true)
  }, [])
  return isMounted
}

function App() {


  const [valueFirst, setValueFirst] = useState(0)
  const [valueSecond, setValueSecond] = useState(0)

  const isMounted = useMounted()

  //1st effect which should run whenever valueFirst change except
  //first time
  React.useEffect(() => {
    if (isMounted) {
      console.log("valueFirst ran")
    }

  }, [valueFirst])


  //2nd effect which should run whenever valueFirst change except
  //first time
  React.useEffect(() => {
    if (isMounted) {
      console.log("valueSecond ran")
    }

  }, [valueSecond])

  return ( <
    div >
    <
    span > {
      valueFirst
    } < /span> <
    button onClick = {
      () => {
        setValueFirst((c) => c + 1)
      }
    } >
    Trigger valueFirstEffect < /button> <
    span > {
      valueSecond
    } < /span> <
    button onClick = {
      () => {
        setValueSecond((c) => c + 1)
      }
    } >
    Trigger valueSecondEffect < /button>

    <
    /div>
  )
}

ReactDOM.render( < App / > , document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

希望对你有帮助!!