react-hooks：在useEffect中跳过第一次运行[重复]答案

【问题标题】：react-hooks: skip first run in useEffect [duplicate]react-hooks：在useEffect中跳过第一次运行[重复]
【发布时间】：2019-04-20 10:45:45
【问题描述】：

如何在useEffect 钩子中跳过第一次运行。

useEffect(() => {
    const first = // ???
  if (first) {
    // skip
  } else {
    // run main code
  }
}, [id]);

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

useRef hook can be used to store any mutable value，因此您可以存储一个布尔值，指示它是否是第一次运行效果。

示例

const { useState, useRef, useEffect } = React;

function MyComponent() {
  const [count, setCount] = useState(0);

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

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

  return (
    <div>
      <p>Clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <MyComponent/>,
  document.getElementById("app")
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

【讨论】：

@estus 使用例如const [isFirstRun, setFirstRun] = useState(true); 并在第一次运行效果时使用 setFirstRun 会导致重新渲染，这可能不是您想要的。
这点很好，谢谢分享。这实际上是我注意到的我自己的实现的问题。
@NicolasZozol 在渲染之间不会保留常规布尔值。你需要一个参考。
在函数外声明的变量被组件的所有实例共享。
注意：如果您使用多个检查 isFirstRun 的 useEffects，请确保只有最后一个（底部）将 isFirstRun 设置为 false。 React 按顺序遍历 useEffects！