react16的渲染过程(源码阅读总结)
最近阅读了react16.6.0的源码，写一些心得，主要是简单描述一下reactDom.render之后发生的事情，纯粹是在说是怎么实现的，一些其他收获以后再添加。
首先会根据传入的元素调用react.createElement方法传入（类型，props，子组件）创建react元素。
之后会reactDom.render会调用createContainer方法创建fiberRoot,即根节点的fiber对象，react16之后会采用新的fiber机制，构建dom树之前会构建完整的fiber树，每个节点都有对应的fiber，存放节点类型，过期时间，state等内容；
之后会调用scheduleRootUpdate方法，主要做三件事情：1、创建更新；2，将更新放进更新队列，将更新队列绑定到fiber上；3，调用scheduleWork进行更新调度；
scheduleWork方法首先会获取当前更新的root节点，之后然后将该root加入更新链表；并根据更新的类型（sync或者async）分边调用performSyncWork进行同步更新和scheduleCallbackWithExpirationTime方法模拟浏览器的requestIdleCaback方法进行异步更新的调度；
scheduleCallbackWithExpirationTime进行调度时参考下表，主要是对已过期更新立即更新，对未过期更新根据浏览器空余时间进行更新（模拟requestAnamitionFram进行每帧的更新），同时会根据每次更新的间隔时间判断当前浏览器的刷新率，如果连续两次小于33ms会重新赋值每帧的时间。
调度完成之后开始真正的调用performwork进行更新，会根据是否可中断分为两种 情况：可中断，performWorkOnRoot();不可中断，时间片未过期||当前任务过期，performWorkOnRoot传入第三个参数ture，更新currentRenderTime；
之后调用renderRoot（isYieldy=false||true，可中断||不可中断）；workLoop循环所有节点，如不可中断，一直直行到未空为止；如可中断，根据浏览器空余时间时间执行performUnitOfWork->beginWork.
之后若props无变化，没有更新，或者组件过期时间>当前最高权限过期时间，选择跳过该节点更新，并做相关优化；
若有更新：使用switch根据不同的tag（节点类型），调用不同的方法更新；
以function类型为例进行更新：
updateFunctionComponent->Component（props,context）生成reactEle,function component也可以使用context->reconcileChildren，创建fiber子树,根据不同类型创建fiber子树，或返回异常。
未完待续...
以上是 react16的渲染过程(源码阅读总结) 的全部内容， 来源链接： utcz.com/z/383484.html
