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

BigPolo
  • 89

为什么直接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>
  )
}
回复
阅读 637
3 个回答

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

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

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

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

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

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

你知道吗?

宣传栏