javascript React hook useEffect 永远持续运行/无限循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53243203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React hook useEffect runs continuously forever/infinite loop
提问by Yangshun Tay
I'm trying out the new React Hooks's useEffectAPI and it seems to keep running forever, in an infinite loop! I only want the callback in useEffectto run once. Here's my code for reference:
我正在尝试新的React Hooks的useEffectAPI，它似乎在无限循环中永远运行！我只希望回调useEffect运行一次。这是我的代码供参考：
Click "Run code snippet" to see the "Run useEffect" string is being printed to the console infinitely.
单击“运行代码片段”以查看“Run useEffect”字符串被无限打印到控制台。
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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>回答by Yangshun Tay
This happens because useEffectis triggered after every render, which is the invocation of the Counter()function in this case of stateless functional components. When you do a setXcall returned from useStatein a useEffect, React will render that component again, and useEffectruns again. This causes an infinite loop:
发生这种情况是因为useEffect在每次渲染之后触发，Counter()在这种无状态功能组件的情况下，这是对函数的调用。当你做一个setX从返回的呼叫useState中useEffect，阵营将再次呈现该组件，并useEffect再次运行。这会导致无限循环：
Counter()→ useEffect()→ setCount()→ Counter()→ useEffect()→ ... (loop)
Counter()→ useEffect()→ setCount()→ Counter()→ useEffect()→ ...（循环）
To make your useEffectrun only once, pass an empty array []as the second argument, as seen in the revised snippet below.
为了让你useEffect只运行一次，传递一个空数组[]作为第二个参数，如下面的修改片段所示。
The intention of the second argument is to tell React when any of the values in the array argument changes:
第二个参数的目的是在数组参数中的任何值发生更改时告诉 React：
useEffect(() => {
setCount(100);
}, [count]); // Only re-run the effect if count changes
You could pass in any number of values into the array and useEffectwill only run when any one of the values change. By passing in an empty array, we're telling React not to track any changes, only run once, effectively simulating componentDidMount.
您可以将任意数量的值传递到数组中，并且useEffect只有在任何一个值发生更改时才会运行。通过传入一个空数组，我们告诉 React 不要跟踪任何更改，只运行一次，有效地模拟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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>Read up more about useEffect.
阅读有关useEffect 的更多信息。
