react为什么直接setCount(10)会陷入死循环，而通过按钮点击就是好的

Question

为什么直接setCount(10)会陷入死循环，而通过按钮点击就是好的

export const GridLayout = (props: GridProps) => {
  const [count, setCount] = useState(0);
  setCount(10)
  return (
    <div className="layout-container">
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
        Click me
        </button>
    </div>
  )
}

Answer 1

react 的渲染原理，你可以理解成 无数个（逻辑上的）渲染周期组成的，每个组件都有自己的逻辑渲染周期（次数）是无限个，且只要每个组件的外部数据或内部数据不变化，那么无论逻辑渲染周期（执行）多少次，组件的功能是不会有任何变化的，也就是说函数组件的这个函数执行无限多的次数，函数的功能都是保持一致的。
react会自动分析计算实际上哪些组件对应的dom节点发生了变化，自动去更新变化的节点（当然很多时候需要你手动优化避免一些不必要的地方去更新dom节点）。

通俗地讲，就是 函数组件的函数体可以运行无数次，return 的不过是些节点结构，告诉react组件长什么样子，有什么事件，引用了哪些数据和函数而已，react会自动处理各种键盘和鼠标事件，去调用你定义的事件处理函数，

当你在函数体内直接调用 setXXX 就是告诉react马上执行新的渲染周期，从函数体第一行重新执行一遍，如此，便是死循环，永远return不了。

Answer 2

每一次对于 state 的赋值都会使组件进行 Re-render(重渲染)，所以每次就会调用到 setXxx 方法就会形成死循环，(可以尝试用打印的方式即可看到)。

作为一个方法时是需要被触发调用的，自然不会形成死循环。

Answer 3

每一次setCount，其实都会重新执行函数。