首先除了一开始需要进行初始化渲染之外，
其他时候如果是触发这个渲染的过程的话， 就需要我们去进行更改state 。
也就是说只有state 的状态发生变化时，react这个通过内部的一个机制会检测到这个变化后才会去进行更新。
当然这个更新的话并不是立即更新，是异步的。
具体流程的话我们下面详细探究一下把。
触发渲染
首先我们需要去更新这个state状态，那在函数组件里面就是调用这个setXX。
当我们触发了这个状态的更新之后，react-reconciler 就会被触发。
然后去scheduler任务调度中心去创建一个任务，这个任务就是这个更新的需求。
那scheduler会根据调度任务的优先级 去决定任务的优先执行顺序。
优先级算法的底层的话是基于requestIdlecallbck 的思想实现的。
然后对这个排序好的任务进行卓一执行。
并且可以在浏览器空闲的时候去执行一些低优先级的任务。
提高优化性能。
当这个task 执行以后，reconciler协调器就会调用组件的render方法，执行render中返回的JSX语法编写的组件。
这个组件也就是JSX语法编写的，浏览器是不认识的，
那就需要进行编译成浏览器认识的代码，所以就用到了babel 编译。
JSX语法是一个语法糖，底层的话用到的其实是那个_jsx 和_jsxs方法，他是一个react 底层引擎提供的方法，来自于react/runtime中。
调用这个方法后会创建一个跟真实dom一样的虚拟dom 。
虚拟dom会接下来转换成fiber。这个是react提供的一个东西可以默认进行转换。
因为fiber 结构比较优秀可以做更多事情。
然后进行新的旧的fiber节点进行对比，用到的是diff算法。
会对不同的地方根据可不可以复用的前提来进行标记，
对真正要更新的部分进行etag记录。
因为上面说到react 的更新不是立即去做的，
所以他会将很多需要更新的部分进行汇总，
然后再一次性的进行全部的更新处理。
进入了commit 阶段。
react会遍历EffectList，
EffectList就是会去收集需要执行副作用的fiber节点，
并且根据effecttag来决定要执行哪些副作用，副作用中有比如插入 更新 删除 dom 节点。
遍历这个EffectList对相应的节点进行对应的真实的dom操作。
一个流程结束。
over
网友评论