React hook useEffect永远连续运行/无限循环

这是因为 useEffect Counter() setX 从返回的呼叫 useState 在一个 使用效果

useEffect() setCount() 使用效果() ... (循环)

使你的 使用效果 只运行一次,传递空数组 []

第二个参数的目的是告诉React数组参数中的任何值何时更改:

useEffect(() => {
  setCount(100);
}, [count]); // Only re-run the effect if count changes

您可以将任意数量的值传入数组并 componentDidMount .

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

ReactDOM.render(<Counter />, document.querySelector('#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>

阅读更多关于 useEffect