解读React源码(一):初探React源码

前言

React的基本概念,API,组件的构建方法以及高级用法,这背后的一切如何运转,深入Virtual DOM内部的实现机制和原理.

初探React源码

1.react代码组织结构:addons,isomorphic,renders,shared,core,test
2.addons:包含一系列的工具方法插件:PureRenderMixin,CsstransitionGroup,Fragment,LinkedStateMixin
isomorphic:包含一系列同构方法
shared:包含一些公用或常用方法,如Transaction,CallbackQueue等
test:包含一些测试方法等
core/tests:包含一些边界错误的测试用例
renders:是react代码的核心部分,它包含了大部分功能实现.
3.renders分为dom和shared目录.
dom:包含client,server,shared
client包含dom操作方法(findDOMNode,setInnerHTML,setTextContent)以及事件方法.
reconciler:称为协调器,他是最为核心的部分,包含react中自定义组件的实现(ReactCompositeComponent),组件生命周期,setState机制(reactUpdates,reactUpdateQueue),
DOM diff算法(ReactMultiChild)等重要的特性方法.

Virtual DOM

1.Virtual DOM实际上是在浏览器端用js实现的一套DOM API,它之于React就好似一个虚拟空间,包括一整套Virtual DOM模型,生命周期的维护和管理,性能高效的diff算法和将Virtual DOM展示为原生DOM的Patch方法等.2.基于react进行开发时,所有的DOM树都是通过Virtual DOM构造的,react在Virtual DOM上实现了DOM diff算法,当数据更新时,会通过diff寻找到需要变更的DOM节点,并只对变化的部分进行实际的浏览器的DOM更新,而不是重新渲染整个DOM树.3.react也能实现Virtual DOM的批处理更新,当操作Virtual DOM时,不会马上生成真实的DOM,而是会将一个事件循环(event loop)内的两次数据更新合并,这就使得react能够在事件循环的结束之前完全不用操作真实的DOM.4.这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到具体的DOM元素,而只需要关心在任意数据状态下,真个界面是如何渲染的.