摘要：我們需要一個(gè)帶有入?yún)⒑头椒ǖ臉?gòu)造函數(shù)，方法可以接收作為入?yún)砀陆M件狀態(tài)我們在創(chuàng)建組件時(shí)都會(huì)繼承上面這個(gè)類。我們需要一個(gè)方法能根據(jù)傳入的元素來創(chuàng)建組件的實(shí)例稱之為公共實(shí)例，其實(shí)就是根據(jù)這個(gè)構(gòu)造函數(shù)出來的一個(gè)對象。

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

上一節(jié)的代碼有一些問題：

每次更新都會(huì)帶來整顆虛擬DOM樹的一致性校驗(yàn)；

狀態(tài)是全局的（沒有私有狀態(tài)）；

有變化發(fā)生后必須手動(dòng)調(diào)用render方法以便將變化反應(yīng)到頁面上。

組件可以幫我們解決上面的問題，同時(shí)還能帶來一些新特性：

允許自定義JSX的標(biāo)簽名

生命周期鉤子（這一節(jié)暫不介紹這部分）

首先我們要定義一個(gè)Component的基礎(chǔ)類，在創(chuàng)建其它組件時(shí)都要繼承該類。我們需要一個(gè)帶有props入?yún)⒑?b>setState方法的構(gòu)造函數(shù)，setState方法可以接收partialState作為入?yún)砀陆M件狀態(tài)：

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

我們在創(chuàng)建組件時(shí)都會(huì)繼承上面這個(gè)類。組件的使用方法和原生的標(biāo)簽如div或者span一樣，直接像這樣就可以了。而且我們的createElement也不需要做修改，元素的type屬性可以直接取值為組件類，剩下的props屬性也不需要特別的處理。我們需要一個(gè)方法能根據(jù)傳入的元素來創(chuàng)建組件的實(shí)例（稱之為公共實(shí)例，其實(shí)就是根據(jù)這個(gè)構(gòu)造函數(shù)new出來的一個(gè)對象）。

function createPublicInstance(element, internalInstance){
    const {type, props} = element;
    const publicInstance = new type(props); // 這地方的type對應(yīng)組件的構(gòu)造函數(shù)
    publicInstance.__internalInstance = internalInstance;
    return publicInstance;
}

組件的內(nèi)部實(shí)例含有組件對應(yīng)的dom元素（內(nèi)部實(shí)例就是前幾節(jié)我們說的實(shí)例，通過調(diào)用instantiate方法生成的）。公共實(shí)例與內(nèi)部實(shí)例的引用關(guān)系會(huì)被保存著，通過這個(gè)引用關(guān)系可以找到公共實(shí)例對應(yīng)的內(nèi)部實(shí)例及虛擬DOM，當(dāng)公共實(shí)例狀態(tài)發(fā)生變化時(shí)，我們就可以只更新發(fā)生變化的內(nèi)部實(shí)例及其對應(yīng)的那部分虛擬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方法需要做一些改造。對組件來講，我們需要先創(chuàng)建公共實(shí)例（先new一個(gè)組建），然后調(diào)用組件的render方法來獲取組件內(nèi)部的元素，最后把獲取到的元素傳遞給instantiate方法。

function instantiate(element){
    const { type, props } = element;
    const isDomElement = typeof type === "string";
    
    if(isDomElement){ // 如果是原生的dom元素的話，直接創(chuàng)建實(shí)例
        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 {// 否則先創(chuàng)建公共實(shí)例，然后再調(diào)用instantiate方法創(chuàng)建內(nèi)部實(shí)例
        const instance = {};
        // 這地方的element是一個(gè)type屬性為一個(gè)構(gòu)造函數(shù)的對象
        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;
    }
}

組件對應(yīng)的內(nèi)部實(shí)例和原生dom元素對應(yīng)的實(shí)例有些不一樣。組件內(nèi)部實(shí)例只會(huì)擁有一個(gè)子元素，即render方法返回的內(nèi)容，而原生dom元素則可以含有多個(gè)子元素。所以對于組件內(nèi)部實(shí)例來講，它們會(huì)有一個(gè)childInstance屬性而不是一個(gè)childInstances數(shù)組。此外，由于在進(jìn)行一致性校驗(yàn)時(shí)需要調(diào)用組件的render方法，所以組件內(nèi)部實(shí)例會(huì)保存對公共實(shí)例的引用（反過來公共實(shí)例也保存著對內(nèi)部實(shí)例的引用）。

接下來我們來處理下組件實(shí)例的一致性校驗(yàn)。因?yàn)榻M件的內(nèi)部實(shí)例只含有一個(gè)子元素（所有元素有一個(gè)統(tǒng)一的父類），只需要更新公共實(shí)例的props屬性，執(zhí)行render方法獲取子元素，然后再進(jìn)行一致性校驗(yàn)就可以了。

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;// 更新公共實(shí)例的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;
    }
}

現(xiàn)在，我們的Didact.js已經(jīng)可以支持組件了。這里可以在線編輯代碼并能看到效果。

使用組件后，我們可以創(chuàng)建自定義的JSX標(biāo)簽，并擁有了組件內(nèi)部狀態(tài)，而且組件有變化時(shí)只會(huì)變更自己的那部分dom內(nèi)容。

相關(guān)內(nèi)容到此結(jié)束。