用了react快大半年,经常遇到不少报错,由于不了解源码,会解决很久的问题。现在打算开始阅读源码,一
个是学习设计者开发react框架的优秀的思想,另一个也是为了工作中解决相关问题。
就从render开始入手吧。
首先进入legacyRenderSubtreeIntoContainer函数。
进入createLegacyRoot函数,
就能看到开始对创建的fiberRoot进行赋值,也就是创建fiberRoot
创建FiberRoot函数:
进入createFiberRoot函数
这里走完之后,即fiberRoot创建完成之后。
就开始走下面的方法:
进入updateContainer函数:
总结: 首次render渲染的时候,主要是创建FiberRoot。之后要生成一个update,不管你是setState还是ReactDOM.render造成的 React 更新,都会生成一个叫update的对象,并且会赋值给Fiber.updateQueue
看上图有一个计算调度时间,后续会单独一篇文章来做时间的调度。
之后计算一个update。
其中有对更新的优先级进行一个赋值。
此处时已经可以看到update上的属性已经都赋值完成:
接下来就插入更新队列中。关于update的属性介绍后续也会有文章进行讲解。
开始下一章的重点:scheduleWork。