React hooks系列之State 页面渲染时的工作流程

前言

在以前的开发中只是知道state的状态状态一旦改变，就会导致整个页面重新渲染，后来在查看react的新版文档后，有了一些新的认识和启发。

1.一个事件中同时触发多个相同的setSate事件,代码如下:

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>
    </>
  )
}

当我们点击按钮 +3 的时候，它只会增加为1，这是为什么? 要了解为什么，其实我们可以从下图中得出结论

如果我们setState某个值,这个值只会在下一次渲染后才会改变。

在React设计中，我们点击按钮之后就会把当前事件中所有能够触发state变化的状态给到React,相当于其实我们三次setNumber(number+1)操作都当做是一次处理提交给到了React中。
React开始处理我们所提交的代码，遇到三次setNumber(number+1)，react会把它们放进一个队列中,[setNumber(number+1),setNumber(number+1),setNumber(number+1)]，他是一种先进先出,也是先进先执行的状况，考虑到state值得改变只会发生在页面重新渲染之后，那么进入队列的三个setNumber(0+1)，其实它们的状态是[setNumber(0+1),setNumber(0+1),setNumber(0+1)]。
最终react返回number到组件上是1。

小结：触发事件中所有能够触发state变化的状态给到React，相当于三次setSate同时给到React，因为state值得改变只会发生在页面重新渲染之后，所以这一次提交到React的number依然还是0，这就是三次setNumber(number+1)为什么只会增加1的原因。