摘要：我們需要一個帶有入參和方法的構造函數，方法可以接收作為入參來更新組件狀態我們在創建組件時都會繼承上面這個類。我們需要一個方法能根據傳入的元素來創建組件的實例稱之為公共實例，其實就是根據這個構造函數出來的一個對象。

翻譯自：https://engineering.hexacta.c...

上一節的代碼有一些問題：

每次更新都會帶來整顆虛擬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一樣，直接像這樣就可以了。而且我們的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內容。

相關內容到此結束。