手把手带你实现一个 Mini React这篇文章将介绍如何实现一个迷你版的 React，我将这个库称为 Mini Rea

这篇文章将介绍如何实现一个迷你版的 React，我将这个库称为 Mini React，我将 Mini react 的源码对应它实现的能力分为了 3 部分。在 React 中有两种类型的自定义组件，分别是函数组件和类组件，在 Mini React 中只实现类组件。

这篇文章的内容如下：

Babel 与 JSX
实现 createElement 和 renderDom 方法让组件渲染在界面上
setState 让组件具备交互性
虚拟 DOM 以及虚拟 DOM 的 diff 算法
Mini React 运行流程图

Babel 与 JSX

在 React 的官网中推荐使用 JSX 描述 UI，我们可以将 JSX 当作模版语言。但是 JSX 不是合法的 html 也不是合法的 Javascript 语法。在 React 官网上还提到 JSX 最终会被转化为 JS 函数调用并且在使用 JSX 的作用域中要能够访问到 React。那么是谁将 JSX 转化成 JS 函数调用的呢？为什么在使用 JSX 的作用域中要能够访问到 React呢？

@babel/plugin-transform-react-jsx 将 JSX 转化成了 JS 函数调用，它是 Babel 的一个插件，这个插件的作用是遍历每个 JSX 节点并将它们转换为函数调用。

被转换成

从上图可以看出 JSX 被转换成了 React.createElement 函数调用的形式，这就是在使用 JSX 的作用域中要能够访问到 React 的原因。@babel/plugin-transform-react-jsx 将 JSX 转换成 React.createElement 函数调用这是它的默认行为，我们通过修改它的配置来改变函数名，配置如下：

module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    plugins: [
                        ["@babel/plugin-transform-react-jsx", {
                            pragma: 'createElement'
                        }]
                    ],
                }
            }
        }]
    }

将 @babel/plugin-transform-react-jsx 的 pragma 参数改成 createElement，这使得 JSX 被转化为 createElement 函数调用。这时我们需要在使用 JSX 的作用域中能够访问到 createElement 函数。下面我们开始实现 createElement。

实现 createElement 和 renderDom 方法让 Mini React 组件渲染在界面上

经过分析可知 createElement 的第一个参数表示被创建的组件，它可能是字符串也可能是一个自定义组件，第二个参数是被创建组件的属性，它可以是 null，剩余的参数是被创建组件的子组件。createElement 的声明如下：

function createElement(type: string | ConstructorOf<Component>, attrs: {[attr: string]: any}, ...children: (string |  Component | ElementNode)[]): Component | ElementNode;

在 DOM 中有两种常见的节点，分别是元素节点和文本节点，在 Mini React 中我们除了要实现这两种浏览器内置的 DOM 节点类型之外还要实现一个自定义组件类型。

文本组件

文本组件的实现非常简单，它只需要文件组件对应的内容，代码如下：

class TextNode {
    root: Text

    constructor(content: string) {
        this.root = document.createTextNode(content)
    }
}

元素组件

对于元素组件，我们需要根据元素类型（这里的元素类型指标签名）创建出元素组件，并且元素组件要有设置属性和添加子组件的方法，代码如下：

class ElementNode {
    root: HTMLElement

    constructor(type: string) {
        this.root = document.createElement(type)
    }

    setAttribute(name: string, value: any) {
        ... something
        this.root.setAttribute(name,value);
    }

    appendChild(component: TextNode | ElementNode | Component) {
        this.root.appendChild(component.root)
    }
}

自定义组件类型

通过 createElement 的类型声明可知，自定义组件类型也有属性和子元素，但是自定义组件没有浏览器内置的 API，我们需要实现这些 API，使用过 React 的同学都知道 React 的类组件必须有 render 方法，所以在 Mini React 中也要求自定义组件必须有 render 方法，代码如下：

abstract class Component {
    props: {[attr: string]: any}
    _root?: HTMLElement
    children: (TextNode | ElementNode | Component)[]

    abstract render() : ElementNode | Component

    constructor() {
        this.props = Object.create(null)
        this.children = []
    }

    setAttribute(name: string, value: any) {
        this.props[name] = value
    }

    appendChild(component: TextNode | ElementNode | Component) {
        this.children.push(component)
    }

    get root(): HTMLElement {
        if(!this._root) {
            this._root = this.render().root
        }
        return this._root;
    }
}

这里的 get root 会导致一个递归调用，一直到 render 方法返回的是一个 ElementNode 类型为止。实现了这三个类型之后，我们开始实现 createElement，在 createElement 函数内部根据 type 的类型创建出不同的组件，然后调用这些组件的方法，代码如下：

function createElement(type: string | ConstructorOf<Component>, attrs: {[attr: string]: any}, ...children: (string | Component | ElementNode)[]): Component | ElementNode {
    let component: Component | ElementNode;
    if (typeof type === 'string') {
        component = new ElementNode(type)
    } else {
        component = new type()
    }

    for (const attrName in attrs) {
        component.setAttribute(attrName, attrs[attrName])
    }
    function insertChildren(children: any[]) {
        for (let child of children) {
            let childComponent: Component | ElementNode | TextNode
            if (child === null) {
                continue;
            }
            if (typeof child === 'string') {
                childComponent = new TextNode(child)
            } else {
                childComponent = child
            }
            if (Array.isArray(child)) {
                insertChildren(child)
            } else {
                component.appendChild(childComponent)
            }
        }
    }

    insertChildren(children)
    return component
}

到目前为止我们已经实现了 createElement 方法，但是只有 createElement 还不够，我们还缺少将组件渲染到浏览器 DOM 树的方法，在这里将它命名为 renderDom，renderDom 参照 ReactDOM.render 的用法，它的实现很简单：

function renderDom (component: Component | ElementNode, parent: HTMLElement) {
    parent.appendChild(component.root);
}

在目前为止我们已经可以将一些简单的组件显示到界面上了，但是这些组件还不能根据用户的交互而更新。在 react 中，组件的 props 或者 state 发生了变化就会触发组件的重新渲染，但是组件不能改变它的 props，它只能改变它的 state，自定义组件的 setState 方法用于去更新 state。接下来我们就开始实现 setState 方法。

查看源码

实现 setState 让组件具备交互性

首先我们先在 Component 抽象类中增加 state 属性，setState 方法，rerender 方法。setState 用于修改 state，rerender 使用新的 state 重新渲染组件。

abstract class Component {
    ...
    state: {[attr: string]: any}
    constructor() {
        ...
        this.state = null;
    }
    ...
    setState(newState: {[attr: string]: any}) {
        // todo
    }
    rerender() {
        // todo
    }
}

setState

我们先实现 setState，setState 将新的 state 与旧的 state 进行合并得到一个最终的 state。

setState(newState: {[attr: string]: any}) {
   if(this.state === null || typeof this.state !== 'object') {
        this.state = newState;
        this.rerender()
        return ;
    }
    const merge = (oldState: {[attr: string]: any}, newState: {[attr: string]: any}) => {
        for (const key in newState) {
            if(oldState[key] !== null && typeof oldState[key] === 'object') {
                merge(oldState[key], newState[key])
            } else {
                oldState[key] = newState[key]
            }
        }
    }

    merge(this.state, newState)
    this.rerender()
}

rerender

我们先回头看一下前面的代码是如何将组件渲染在界面上的，在前面我们使用了 appendChild API 将子元素添加到父元素中，但是当我们需要根据新的 state 重新渲染界面时，appendChild API 就不满足需求了，我们需要使用更精细化操作 dom 的 API，在这里，我使用 HTML5 中的 Range API 来更新界面上的 DOM。

回到重新渲染这个话题上，在 state 发生变化之后，我们是在原来的 range 上进行增删改，所有在初始渲染上，我们需要将最开始的 range 保存下来，然后在重新渲染的时候再使用这个 range。我们要将所有使用 (node as HTMLElement).appendChild 的地方全部替换成 Range。我们首先改造 renderDom。

function renderDom(component: Component | ElementNode, parent: HTMLElement) {
    const range = document.createRange()
    range.setStart(parent,0)
    range.setEnd(parent,parent.childNodes.length)
    range.deleteContents()
    component[RENDER_TO_DOM](range)
}

接下来实现上面三种组件类型的[RENDER_TO_DOM]方法，总的来说[RENDER_TO_DOM]方法就是将组件的 root 插入到 range 中，TextNode 和 ElementNode 的 [RENDER_TO_DOM] 是一样的，如下：

[RENDER_TO_DOM](range: Range) {
    range.deleteContents()
    range.insertNode(this.root)
}

自定义组件（即：Component）的[RENDER_TO_DOM]与其他的两种类型的[RENDER_TO_DOM]有所不同，这源于 Component 的真实 DOM 树是从它的 render 方法中返回的，并且 Component.render 返回的可能依然是一个 Component 而非 ElementNode，但是 range 中只能插入真实的 DOM，在前一个章节，当我们访问 Component.root 时会触发递归调用，Component.root 的值等于 Component.render 返回值的 root。现在的Component[RENDER_TO_DOM]类似, Component[RENDER_TO_DOM] 实际上调用的是 Component.render()[RENDER_TO_DOM],这里也有触发递归调用，代码如下：

[RENDER_TO_DOM](range: Range) {
    // 将 range 保存下来，供 rerender 的时候使用
    this._range = range
    // 这里会导致一个递归调用，一直到 render 方法返回的是一个 ElementNode 类型为止
    this.render()[RENDER_TO_DOM](range)
}

现在三种组件类型的[RENDER_TO_DOM]方法已经实现了，我们还需要改造 ElementNode.appendChild 方法，因为在这个方法我们依然使用的是 (node as HTMLElement).appendChild, 我们要将它改成 Range API,如下：

appendChild(component: Component | ElementNode | TextNode) {
    const range: Range = document.createRange()
    // 因为是在节点的最后添加子元素，所以将 range 移动到末尾
    range.setStart(this.root, this.root.childNodes.length)
    range.setEnd(this.root,this.root.childNodes.length)
    component[RENDER_TO_DOM](range)
}

最后实现 Component.rerender，它只是使用 _range 重新调用一次Component[RENDER_TO_DOM],如下：

rerender() {
    this._range.deleteContents()
    this[RENDER_TO_DOM](this._range)
}

查看源码

创建虚拟 DOM 以及虚拟 DOM 的 diff 算法

在现在为止 Mini React 已经实现了重新渲染，但是我们一直操作的是真实 DOM 并且更新范围非常大。接下来我们要实现虚拟 DOM 并且减少更新范围。

　vNode(即：虚拟 DOM )和 vNode 的 diff 算法主要是为了优化重新渲染的性能，在重新渲染的时候会将新旧 vNode 进行对比，然后只将有变更的 vNode 反映到真实的 DOM 上。既然要对比新旧vNode，那么我们就要将旧的　vNode 保存下来供重新渲染的时候使用。我们给每一个组件类型都增加 vdom 属性，vdom 用于保存 vNode。

diff 算法有很多种类型，在 Mini React 中使用的是一种非常简单的 diff 算法，它的思想如下：

如果两个新旧 vNode 的 type 不同就认为它们是不同的 Node，然后 diff 算法终止
如果两个文本 vNode 的内容不同就认为它们是不同的 Node，然后 diff 算法终止
如果两个 vNode 的 props 中相同的属性不相同就认为它们是不同的 Node，然后 diff 算法终止
如果新的 vNode.props 的数量小于旧的 vNode.props 的数量就认为它们是不同的 Node，然后 diff 算法终止
如果经过前面 4 条规则之后确定两个 vNode 是一样的 Node，就遍历新旧 vNode 的子 vNode，并且使用 1-4 条中的规则去对比子 vNode

如果认为新旧 vNode 是不同的 Node，那么就销毁整个旧的 vNode 对应的 DOM 树并且使用新的 vNode 重新渲染 DOM 树。

对于 TextNode 而言，它有一个 type 属性 (表示这是一个文本 vNode，type 为固定的值)，content 属性（文本 vNode 的内容），_range 属性（文本 vNode 的插入范围）,vdom 属性（返回文本 vNode 自身）还有一个 [RENDER_TO_DOM]方法，这个方法用于将 vNode 渲染到界面上。

class TextNode {
    type: string;
    content: string;
    _range: Range;
    constructor(content: string) {
        this.type = '#text';
        this.content = content;
        this._range = null
    }
    get vdom(): TextNode {
        return this;
    }
    [RENDER_TO_DOM](range: Range) {
        const root = document.createTextNode(this.content)
        range.deleteContents()
        this._range = range;
        range.insertNode(root)
    }
}

与前面的 TextNode 相比，新的 TextNode 去掉了一些属性也新增了一些属性，需要注意的是去掉了 root 属性，这是因为我们创建的是一个 vNode，root 是一个真实的 DOM Node, 它不应该保存在 vNode 中，它只能在 vNode render to dom 的时候被创建并作为临时使用。

ElementNode 在 render to dom 之前也不能有任何关于真实 DOM 的操作，所以我们要修改 ElementNode.setAttribute 和 ElementNode.appendChild，我们要把真实的 DOM 操作放在 [RENDER_TO_DOM]中。简化代码如下：

class ElementNode {
    ... dosomething
    setAttribute(name: string,value: any) {
        this.props[name] = value
    }
    appendChild(component: Component | ElementNode | TextNode) {
        this.children.push(component)
    }
    [RENDER_TO_DOM](range: Range) {
        const root = document.createElement(this.type);
        range.deleteContents()
        for (const name in this.props) {
            const value = this.props[name]
            ... dosomething
            root.setAttribute(name,value);
        }
        if (!this.vChildren) {
            this.vChildren = this.children.map(child => child.vdom);
        }
        for (const child of this.vChildren) {
            const childRange = document.createRange()
            childRange.setStart(root, root.childNodes.length)
            childRange.setEnd(root, root.childNodes.length)
            child[RENDER_TO_DOM](childRange)
        }
        this._range = range;
        range.insertNode(root)
    }
}

我们将 setAttribute 和 appendChild 修改成只是往 vNode 上增加属性，在[RENDER_TO_DOM]中才操作真实的 DOM。现在我将 ElementNode 和 TextNode 改造的差不多了，接下来轮到改造 Component 了。回到 vdom 这个属性上，vdom 保存是虚拟 DOM (即：vNode)，对于 ElementNode 和 TextNode 而言它的 vdom 是它的实例本身，但是 Component.vdom 不再是 Component 的实例本身了，Component.vdom 等于 Component.render().vdom，这是因为Component 的渲染结果取决于从 render 方法的返回值。在前面我们提到需要将旧的 vNode 保存下来，在这里我将它保存到 _vdom 中。

class Component {
    ... do something
    get vdom(): ElementNode {
        // 这里会触发递归调用，一直到 render 返回值是非 Component 结束
        const vdom = this.render().vdom
        // 将本次用于渲染的 vNode 保存下来
        if (!this._vdom) {
            this._vdom = vdom
        }
        return vdom
    }
    [RENDER_TO_DOM](range: Range) {
        this._range = range
        this.vdom[RENDER_TO_DOM](range)
    }
}

在前面为了实现用户界面更新我们定义了 rerender 方法，但是这个方法的弊端是：不管怎么修改 Component.state 的值，当重新渲染的时候 Component.range 对应的整个 DOM 树都会摧毁重建。我们现在要做的是利用 diff 算法对比新旧 vNode 的变更，减少真实 DOM 的更新范围。现在给 Component 增加一个 update 方法，这个方法用于对比新旧 vNode，然后调用新的vNode[RENDER_TO_DOM]去更新界面，代码如下：

class Component {
    ... do something
    update() {
        // 利用前面提到的 diff 算法规则比较两个 vNode 是否是相同的
        function isSameNode(oldNode: TextNode | ElementNode, newNode: TextNode | ElementNode): boolean {
            ... dosomething
        }
        const update = (oldNode: TextNode | ElementNode, newNode: TextNode | ElementNode) => {
            if (!isSameNode(oldNode, newNode)) {
                // 如果不是相同的 vNode，则重建整个新 vNode 对应的 DOM 树
                newNode[RENDER_TO_DOM](oldNode._range)
                return;
            }
            newNode._range = oldNode._range

            ... dosomething

            // 得到子 vNode
            const newChildren = newNode.vChildren;
            const oldChildren = oldNode.vChildren;

            // 最后一个 node 所在的 range
            let tailRange = oldChildren[oldChildren.length - 1]._range

            for (let i = 0; i < newChildren.length; i++) {
                let newChild = newChildren[i];
                let oldChild = oldChildren[i];

                if (i < oldChildren.length) {
                    update(oldChild, newChild)
                }

                // 如果 newChildren 的长度大于 oldChildren 的长度，将新的 node 插入到末尾
                else {
                    let range = document.createRange()
                    // 将 range 移动到末尾
                    range.setStart(tailRange.endContainer, tailRange.endOffset);
                    range.setEnd(tailRange.endContainer, tailRange.endOffset);

                    newChild[RENDER_TO_DOM](range)
                    tailRange = range;
                }
            }
        }
        const vdom = this.vdom;
        update(this._vdom,vdom);
        // 保存本次更新的 vdom
        this._vdom = vdom;
    }
}

现在删除 rerender 方法，并且将 setState 方法中调用 rerender 的地方改成调用 update。现在 ini React 可以支持局部更新了。

查看源码

手把手带你实现一个 Mini React

Babel 与 JSX

实现 createElement 和 renderDom 方法让 Mini React 组件渲染在界面上

文本组件

元素组件

自定义组件类型

实现 setState 让组件具备交互性

setState

rerender

创建虚拟 DOM 以及虚拟 DOM 的 diff 算法

Mini React 运行流程图