解读React源码(一):初探React源码-白红宇

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

阅读量：7024 次

发布时间：2019-06-28

本文共 1113 字，大约阅读时间需要 3 分钟。

前言

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

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)等重要的特性方法.

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元素,而只需要关心在任意数据状态下,真个界面是如何渲染的.

转载地址：http://bvpxl.baihongyu.com/

你可能感兴趣的文章