为什么我的 useState 会无限循环

[hxse]

先用 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.
百思不得其解

[hlwjia]

virtual dom 的渲染是你每次触发 setState 都会发生的；只是因为什么都没有变，所以 native dom 就没有重新渲染。

可以看看 PureComponent 或者 memo 是可以解决这个问题；只是你这个写法根本就不应该在实际代码中出现。

[yyfearth]

很简单 因为 setState 比并不会判断值是否变化
只要 setState 就会重新渲染 并且再调用 setState 导致死循环

想要判断值变化来避免死循环 要在 setState 我们套一个 useEffect

[dany813]

setCount 每次更新，组件都会渲染，然后渲染后又更新，死循环了。。。

[Posuker]

0 === 0 是没错，但是 setCount 并不是设置 count 值，他是修改了整个 state 。
简单理解的话，setCount 是，setState({ ...state, count: newCount})，整个 state 产生了变化，然后触发更新……
触发更新就会重新渲染视图，然后触发 setCount ，无限循环。。。。