/toy-react

React 基本原理实现玩具版

Primary LanguageJavaScript

ToyReact

React 基本原理实现玩具版

Demo: https://lebronjs.github.io/toy-react/

day 1

1、@babel/plugin-transform-react-jsx

webpack babel-loader 的插件, 将 JSX 转变成 React 函数调用。
pragma: 替换编译 JSX 表达式时使用的函数。
默认是：React.createElement, 这里替换成了ToyReact.createElement

2、let a = <MyComponent name="a" id="ida"><span id="lbj">lebronjs</span></MyComponent>编译以后:

先获取元素children， 执行... createElement("span" .... 从内部一层层返回

var a = _ToyReact__WEBPACK_IMPORTED_MODULE_0__["ToyReact"].
createElement(MyComponent, {
  name: "a",
  id: "ida"
}, _ToyReact__WEBPACK_IMPORTED_MODULE_0__["ToyReact"].
createElement("span", {
  id: "lbj"
}, "lebronjs"));

3、调用的render，触发自定义组件的mountTo, 返回一个个jsx转义后的createElement函数

day 2

1、 实现 setState 的功能

2、 实现 on 事件的监听

3、document.createRange()

返回一个 range 对象，可通过 setStart 、 setEndAfter 等设置指定节点内容范围

range 可实现局部 re-render

day 3

1、虚拟 dom

当前组件的state改变 → 触发update→ 执行挂载mountTo → 实现局部更新