React学习 -- React源码(1)

前端之家收集整理的这篇文章主要介绍了React学习 -- React源码(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React源码结构树:

在这些目录结构中,renderers是React代码的核心部分,它包含了大部分功能的实现。

renderers源码目录:

在renderers中,reconciler(协调器)是最核心的部分,包含React中自定义组件的实现、组件生命周期机制、setState机制、DOM diff算法等。

为什么reconciler是核心?

因为reconciler是实现Virtual DOM的最主要代码:在web开发中,要将更新的数据实时反应到UI上,就不可避免的需要对DOM进行操作,而对DOM的复杂频繁的操作将导致开销巨大、性能下降。为此,React引入了VirtualDOM机制,这也正是React的核心与精髓。

在基于React进行开发时,所有的DOM树都是通过VirtualDOM创造的。React在VirtualDOM上实现了DOM diff算法。当数据更新时,会通过该算法找到需要变更的DOM节点,并只对变化的部分进行DOM更新,而不是重新渲染整个DOM树。

原文链接:https://www.f2er.com/react/303779.html

猜你在找的React相关文章