构建自己的React(4):Components and State

翻译自这里：https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37

Components and State

上一节的代码有一些问题：

每次更新都会带来整颗虚拟DOM树的一致性校验；
状态是全局的（没有私有状态）；
有变化发生后必须手动调用render方法以便将变化反应到页面上。

组件可以帮我们解决上面的问题，同时还能带来一些新特性：

允许自定义JSX的标签名
生命周期钩子（这一节暂不介绍这部分）

首先我们要定义一个Component的基础类，在创建其它组件时都要继承该类。我们需要一个带有props入参和setState方法的构造函数，setState方法可以接收partialState作为入参来更新组件状态：

class Component{
    constructor(props){
        this.props = props;
        this.state = this.state || {}
    }
    
    setState(partialState){
        this.state = Object.assign({}, this.state, partialState);
    }
}

我们在创建组件时都会继承上面这个类。组件的使用方法和原生的标签如div或者span一样，直接像这样<MyComponent />就可以了。而且我们的createElement也不需要做修改，元素的type属性可以直接取值为组件类，剩下的props属性也不需要特别的处理。我们需要一个方法能根据传入的元素来创建组件的实例（称之为公共实例，其实就是根据这个构造函数new出来的一个对象）。

function createPublicInstance(element, internalInstance){
    const {type, props} = element;
    const publicInstance = new type(props); // 这地方的type对应组件的构造函数
    publicInstance.__internalInstance = internalInstance;
    return publicInstance;
}

组件的内部实例含有组件对应的dom元素（内部实例就是前几节我们说的实例，通过调用instantiate方法生成的）。公共实例与内部实例的引用关系会被保存着，通过这个引用关系可以找到公共实例对应的内部实例及虚拟DOM，当公共实例状态发生变化时，我们就可以只更新发生变化的内部实例及其对应的那部分虚拟DOM：

class Component{
    constructor(props){
        this.props = props;
        this.state = this.state || {}
    }
    
    setState(partialState){
        this.state = Object.assign({}, this.state, partialState);
        updateInstance(this.__internalInstance);
    }
}

function updateInstance(internalInstance){
    const parentDom = internalInstance.dom.parentNode;
    const element = internalInstance.element;
    reconcile(parentDom, internalInstance, element);
}

instantiate方法需要做一些改造。对组件来讲，我们需要先创建公共实例（先new一个组建），然后调用组件的render方法来获取组件内部的元素，最后把获取到的元素传递给instantiate方法。

function instantiate(element){
    const { type, props } = element;
    const isDomElement = typeof type === 'string';
    
    if(isDomElement){ // 如果是原生的dom元素的话，直接创建实例
        const isTextElement = type === TEXT_ELEMENT;
        const dom = isTextElement
        	? document.createTextNode('')
        	: document.createElement(type);
         
         updateDomProperties(dom, [], props);
         
         const childElements = props.children || [];
         const childInstances = childElements.map(instantiate);
         const childDoms = childInstances.map(childInstance => childInstance.dom);
         childDoms.forEach(childDom => dom.appendChild(childDom));
         
         const instance = { dom, element, childInstances };
         return instance;
    } else {// 否则先创建公共实例，然后再调用instantiate方法创建内部实例
        const instance = {};
        // 这地方的element是一个type属性为一个构造函数的对象
        const publicInstance = createPublicInstance(element, instance);
        const childElement = publicInstance.render();//获取最新的子元素
        const childInstance = instantiate(childElement);
        const dom = childInstance.dom;
        
        Object.assign(instance, { dom, element, childInstance, publicInstance});
        return instance;
    }
}

组件对应的内部实例和原生dom元素对应的实例有些不一样。组件内部实例只会拥有一个子元素，即render方法返回的内容，而原生dom元素则可以含有多个子元素。所以对于组件内部实例来讲，它们会有一个childInstance属性而不是一个childInstances数组。此外，由于在进行一致性校验时需要调用组件的render方法，所以组件内部实例会保存对公共实例的引用（反过来公共实例也保存着对内部实例的引用）。

接下来我们来处理下组件实例的一致性校验。因为组件的内部实例只含有一个子元素（所有元素有一个统一的父类），只需要更新公共实例的props属性，执行render方法获取子元素，然后再进行一致性校验就可以了。

function reconcile(parentDom, instance, element){
    if(instance == null){
        const newInstance = instantiate(element);
        parentDom.appendChild(newInstance.dom);
        return newInstance;
    } else if( element == null){
        parentDom.removeChild(instance.dom);
        return null;
    } else if(instance.element.type !== element.type){
        const newInstance = instantiate(element);
        parentDom.replaceChild(newInstance.dom, instance.dom);
        return newInstance;
    } else if(typeof element.type === 'string'){
        updateDomProperties(instance.dom, instance.element, props, element.props);
        instance.childInstances = reconcileChildren(instance, element);
        instance.element = element;
        return instance;
    } else {
        instance.publicInstance.props = element.props;// 更新公共实例的props
        const childElement = instance.publicInstance.render(); // 获取最新的子元素
        const oldChildInstance = instance.childInstance;
        const childInstance = reconcile(parentDom, oldChildInstance, childElement);
        
        instance.dom = childInstance.dom;
        instance.childInstance = childInstance;
        instance.element = element;
        return instance;
    }
}

现在，我们的Didact.js已经可以支持组件了。这里可以在线编辑代码并能看到效果。

使用组件后，我们可以创建自定义的JSX标签，并拥有了组件内部状态，而且组件有变化时只会变更自己的那部分dom内容。