Skip to content

Latest commit

 

History

History
42 lines (30 loc) · 1.19 KB

File metadata and controls

42 lines (30 loc) · 1.19 KB

my_reactjs

自己实现的reactjs,用于加深对React的理解

Quick Start

 git clone git@github.com:lingximu/my_reactjs.git
 cd my_reactjs
 npm install
 npm start ## 内部用browser-sync代理index.hmtl进行开发

Introduce

包括"初次渲染"和"组件更新"两部分

初次渲染

三个基本组件类

ReactDOMTextComponent
ReactDOMComponent
ReactCompositeComponent
  • 所有都用React.createElement进行初始化,包括React.createClass生成的组件。
  • instantiateReactComponent实例化
  • mountComponent挂载(每个类只关心自己的)

组件更新

setState及各个类上的receiveComponent 更新. 其中包括三个关键方法 _shouldUpdateReactComponent_diff_patch

  • _shouldUpdateReactComponent用来判断是否是相同的组件,从而判断是修改还是重新mount.
  • _diff核心算法,判断改变的节点。所有的并存在 diffQueue 中。
  • _patch,在用 _diff 收集完所有改变后,用这个方法进行改变。

效果如下

实现了初次渲染、数据更新、组件更新的功能

my_react效果演示