摘要：寫在開頭從頭實現(xiàn)一個簡易版一地址上一節(jié)，我們詳細介紹了實現(xiàn)一個簡易的思路以及整體的結構，但是對于渲染和更新的原理，卻還沒有提及，因此，本節(jié)我們將重點放在的渲染上。

從頭實現(xiàn)一個簡易版React（一）地址：https://segmentfault.com/a/11...
上一節(jié)，我們詳細介紹了實現(xiàn)一個簡易React的思路以及整體的結構，但是對于渲染和更新的原理，卻還沒有提及，因此，本節(jié)我們將重點放在vDom的渲染上。

我們把React元素分為text，basic，custom三種，并分別封裝了三種vDom的ReactComponent，用來處理各自的渲染和更新，在這里，我們將重心放在各自ReactComponet的mount方法上。

ReactTextComponent用來處理文本節(jié)點，為了標識方便，在返回的內(nèi)容上加了span標簽。

// 用來表示文本節(jié)點在渲染，更新，刪除時應該做的事情
class ReactTextComponent extends ReactComponent {
  // 渲染
  mountComponent(rootId) {
    this._rootNodeId = rootId
    return `${this._vDom}`
  }
}
//代碼地址：src/react/component/ReactTextComponent.js

ReactTextComponent的mount方法非常簡單，打上標識符，將內(nèi)容插入標簽內(nèi)，并把標簽內(nèi)容返回就可以了。

這個類用來處理原生節(jié)點的vDom，在將vDom渲染為原生DOM時，要考慮3點：

元素類型

拼湊屬性，包含普通屬性及事件的處理

子節(jié)點的遞歸渲染

代碼如下：

// 用來表示原生節(jié)點在渲染，更新，刪除時應該做的事情
class ReactDomComponent extends ReactComponent {
  constructor(vDom) {
    super(vDom)
    this._renderedChildComponents = null
  }

  // 渲染
  mountComponent(rootId) {
    this._rootNodeId = rootId

    const { props, type, props: { children = [] } } = this._vDom,
      childComponents = []

    // 設置tag，加上標識
    let tagOpen = `${type} data-reactid=${this._rootNodeId}`,
      tagClose = `/${type}`,
      content = ""

    // 拼湊屬性
    for (let propKey in props) {
      // 事件
      if (/^on[A-Za-z]/.test(propKey)) {
        const eventType = propKey.replace("on", "")
        $(document).delegate(`[data-reactid="${this._rootNodeId}"]`, `${eventType}.${this._rootNodeId}`, props[propKey])
      }

      // 普通屬性，排除children與事件
      if (props[propKey] && propKey !== "children" && !/^on[A-Za-z]/.test(propKey)) {
        tagOpen += ` ${propKey}=${props[propKey]}`
      }
    }

    // 獲取子節(jié)點渲染出的內(nèi)容
    children.forEach((item, index) => {
      // 再次使用工廠方法實例化子節(jié)點的component，拼接好返回
      const childComponent = instantiateReactComponent(item)
      childComponent._mountIndex = index

      childComponents.push(childComponent)

      // 子節(jié)點的rootId是父節(jié)點的rootId加上索引拼接的值
      const curRootId = `${this._rootNodeId}.${index}`
      // 得到子節(jié)點的渲染內(nèi)容
      const childMarkup = childComponent.mountComponent(curRootId)
      // 拼接
      content += childMarkup

      // 保存所有子節(jié)點的component
      this._renderedChildComponents = childComponents
    })

    return `<${tagOpen}>${content}<${tagClose}>`
  }
}
//代碼地址：src/react/component/ReactDomComponent.js

在React的官方實現(xiàn)中，自己實現(xiàn)了一套事件系統(tǒng)，這里用了jQuery的事件代替。
在樣式上，需要基于傳入的style對象創(chuàng)建樣式，這里也暫時忽略了。

在創(chuàng)建自定義組件時，通常會這樣創(chuàng)建

import React from "react"

class App extends React.Component {
  render() {
    return (
       
    )
  }
}

所以，第一步，我們先實現(xiàn)Component這個父類

// 所有自定義組件的父類
class Component {
  constructor(props) {
    this.props = props
  }

  setState(newState) {
    this._reactInternalInstance.updateComponent(null, newState)
  }
}
//代碼地址：src/react/Component.js

Component類上我們主要實現(xiàn)了setState方法，至于有什么用，我們放在更新里說。
在自定義組件的vDom中，type保存的是我們創(chuàng)建的Component的引用，所以在ReactCompositeComponent的mount方法中。我們首先根據(jù)vDom的type創(chuàng)建組件的實例，在以此調(diào)用它初始渲染的生命周期方法，render方法。
在render方法中，返回了組件渲染內(nèi)容的vDom，我們根據(jù)這個vDom創(chuàng)建它的ReactComponent并調(diào)用mount(),就得到了真實的渲染內(nèi)容。
貼代碼：

export default class extends ReactComponent {
  constructor(element) {
    super(element)
    // 存放對應的組件實例
    this._instance = null
    this._renderedComponent = null
  }

  // 渲染
  mountComponent(rootId) {
    this._rootNodeId = rootId
    const { type: Component, props } = this._vDom

    // 獲取自定義組件的實例
    const inst = new Component(props)
    this._instance = inst

    // 保留對當前component的引用，下面更新時會用到
    inst._reactInternalInstance = this

    inst.componentWillMount && inst.componentWillMount()

    // 調(diào)用自定義組件的render方法，返回一個Vdom
    const renderedVdom = inst.render()

    // 獲取renderedComponent的component
    const renderedComponent = instantiateReactComponent(renderedVdom)
    this._renderedComponent = renderedComponent

    // 得到渲染之后的內(nèi)容
    const renderMarkup = renderedComponent.mountComponent(this._rootNodeId)

    // 在React.render方法最后觸發(fā)了mountReady事件，所在在這里監(jiān)聽，在渲染完成后觸發(fā)
    $(document).on("mountReady", () => {
      inst.componentDidMount && inst.componentDidMount()
    })

    return renderMarkup
  }
}
// 代碼地址：src/react/component/ReactCompositeComponent.js

從這里可以看出，自定義組件的mount方法并不負責具體的渲染，這些都交給了它的render，它把重心放在了創(chuàng)建對象和調(diào)用生命周期上。

文章到這，我們的簡易版react已經(jīng)初步實現(xiàn)了虛擬DOM的創(chuàng)建，生命周期的調(diào)用，虛擬DOM的遞歸渲染和事件處理。
總結一下，每一個vDom都有ReactComponent相對應，遞歸渲染的本質(zhì)無非就是獲取每個vDom的ReactComponent,并調(diào)用它的mount方法。
以上就是整個渲染的思路，下節(jié)我們將實現(xiàn)它的diff算法以及更新。
下一節(jié)地址：https://segmentfault.com/a/11...

參考資料，感謝幾位前輩的分享：
https://www.cnblogs.com/sven3...
https://github.com/purplebamb...
陳屹 《深入React技術棧》