有多个 useEffect 时跳过第一个 useEffect答案

【问题标题】：Skip first useEffect when there are multiple useEffects有多个 useEffect 时跳过第一个 useEffect
【发布时间】：2019-12-05 23:41:10
【问题描述】：

要限制 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]);

【问题讨论】：

请展示一个完整的例子
如果要求在第一次渲染后运行多个效果，为什么不在单个 useEffect 调用中放置多个效果？
是 reactjs（如何实现）或 jest（如何进行单元测试）上下文中的问题？
您能否提供更多详细信息，说明您为什么需要这样的逻辑？对我来说，将组件分解为具有不同职责的 2 个组件会更容易。
@skyboyer 更多关于如何实现它的 React 前沿

标签： reactjs react-hooks

【解决方案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>

希望对你有帮助！！

【讨论】：

完美。这正是我想要的，谢谢。
对我没用，看不到它是如何工作的，我的 ref 在第二次 useEffect 运行时没有更新为新值

【解决方案2】：

你可以使用一个 useEffect 来做这两个效果，你只是错误地实现了逻辑。

你最初的尝试：

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

这里的问题是if/elseif，请将它们视为独立效果：

useEffect(() => {
  if (amount !== 0) props.onAmountChange(amount);
  if (type !== "Type1") props.onTypeChange(type);
}, [amount, type])

在这个方法中，如果值与原始值不同，它会调用on change。但是，这有一个错误，即如果用户将值切换回默认值，它将不起作用。所以我建议实现这样的全部代码：

const Comp = () => {
  const [ amount, setAmount ] = useState(null);
  const [ type, setType ] = useState(null);

  useEffect(() => {
    if (amount !== null) {
      props.onAmountChange(amount);
    } else {
      props.onAmountChange(0);
    }
  }, [amount]);

  useEffect(() => {
    if (type !== null) {
      props.onTypeChange(type);
    } else {
      props.onTypeChange("Type1");
    }
  }, [type]);

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

通过使用null 作为初始状态，您可以延迟调用props 方法，直到用户在 Radio 中设置一个更改状态的值。

【讨论】：