先用 npx create-react-app my-app 创建了一个 react app
然后把 ./src/App.js 改成
import React, { useState } from "react";
function App() {
const [count, setCount] = useState(0);
setCount(0);
return <div>{count}</div>;
}
export default App;
这个代码,count 的初始值是 0, setCount 的值也是 0, 按理说0===0的值是 true, 这个 setCount 不应该触发渲染才对啊, 结果发现它无限循环了, 报错:
Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
百思不得其解
 |
1
hlwjia PRO virtual dom 的渲染是你每次触发 setState 都会发生的；只是因为什么都没有变，所以 native dom 就没有重新渲染。
可以看看 PureComponent 或者 memo 是可以解决这个问题；只是你这个写法根本就不应该在实际代码中出现。 |
 |
2
yyfearth Jan 2, 2022 via iPhone
很简单 因为 setState 比并不会判断值是否变化
只要 setState 就会重新渲染 并且再调用 setState 导致死循环 想要判断值变化来避免死循环 要在 setState 我们套一个 useEffect |
 |
3
dany813 Jan 2, 2022
setCount 每次更新，组件都会渲染，然后渲染后又更新，死循环了。。。
|
 |
4
Posuker Jan 10, 2022
0 === 0 是没错，但是 setCount 并不是设置 count 值，他是修改了整个 state 。
简单理解的话，setCount 是，setState({ ...state, count: newCount})，整个 state 产生了变化，然后触发更新…… 触发更新就会重新渲染视图，然后触发 setCount ，无限循环。。。。 |
Select Language