写在前面
网上有许多关于react
源码解读的文章,其中有很多都只是单纯贴源码,罗列变量名。其实大家都知道这个英文怎么读,直译也大概知道意思,但是这个英文在react
中起到什么作用,并没有说的很通俗明白。
对于刚刚接触源码或者想要了解react
实现的人来说,没有起到引导作用,一堆函数变量反而劝退了很多人。
所以打算开启一个系列的文章,用简单的代码片段代替源码,拆解react
的时间分片、优先级调度、diff等核心模块,让大家一眼就能明白其中的原理。
react15为什么需要进化
react15有两大原罪,渲染阻塞和无法合并异步函数里面的setState
原罪1:同步渲染阻塞主线程
react15从setState
到DOM节点渲染到页面上,整个流程都是同步的,所以如果其中某个环节占用时间特别长,就会造成主线程阻塞。
由于JS的执行是单线程的,JS线程与浏览器的其他线程互斥,如果JS线程阻塞,浏览器的渲染线程、事件线程也会相应的挂起。此时用户触发的浏览器原生事件也会无响应,造成卡顿的现象。
疑问:react15什么情况下会造成阻塞?
react15采用的是树形结构的虚拟DOM树
,使用了递归
方式的进行节点遍历,递归意味着虚拟DOM树的构建是一个同步的过程,只要一开始就无法中断。而且DOM节点层级越深,节点数越多,diff流程霸占JS线程的时间就越长。
当然网上都是这么说,实际上是不是真的是树形结构,是不是真的用递归的方式进行节点遍历,还是需要经过实际源码考证,为此我翻看了react@15.5.3
的源码
求证1:树形结构
<div key={
'最外层节点'}>
{
['a', 'b', 'c', 'd'].map( (v,index) =>
<div key={
`第一层子节点 - ${
v}`}>
<span key={
`${
v}的子节点`}>parentNode:{
v}<