5.state更新流程(setState里到底发生了什么)

人人都能读懂的react源码解析(大厂高薪必备)

5.state更新流程(setState里到底发生了什么)

视频课程&调试demos

​ 视频课程的目的是为了快速掌握react源码运行的过程和react中的scheduler、reconciler、renderer、fiber等，并且详细debug源码和分析，过程更清晰。

​ 视频课程：进入课程

​ demos：demo

课程结构:

1. 开篇(听说你还在艰难的啃react源码)
2. react心智模型(来来来,让大脑有react思维吧)
3. Fiber(我是在内存中的dom)
4. 从legacy或concurrent开始(从入口开始,然后让我们奔向未来)
5. state更新流程(setState里到底发生了什么)
6. render阶段(厉害了,我有创建Fiber的技能)
7. commit阶段(听说renderer帮我们打好标记了,映射真实节点吧)
8. diff算法(妈妈再也不担心我的diff面试了)
9. hooks源码(想知道Function Component是怎样保存状态的嘛)
10. scheduler&lane模型(来看看任务是暂停、继续和插队的)
11. concurrent mode(并发模式是什么样的)
12. 手写迷你react(短小精悍就是我)

​

​ 上一节我们介绍了react两种模式的入口函数到render阶段的调用过程，也就是mount首次渲染的流程，这节我们介绍在更新状态之后到render阶段的流程。

在react中触发状态更新的几种方式：

• ReactDOM.render

• this.setState

• this.forceUpdate

• useState

• useReducer

  我们重点看下重点看下this.setState和this.forceUpdate，hook在第11章讲

  1.this.setState内调用this.updater.enqueueSetState

  Component.prototype.setState = function (partialState, callback) {
       
       
    if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) {
       
       
      {
       
       
        throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." );
      }
    }
    this.updater.enqueueSetState(this, partialState, callback, 'setState');
  };
  

  2.this.forceUpdate和this.setState一样，只是会让tag赋值ForceUpdate

  enqueueForceU