从头实现一个简易版React（二）

写在开头

从头实现一个简易版React（一）地址：https://segmentfault.com/a/11...
上一节，咱们详细介绍了实现一个简易React的思路以及总体的结构，可是对于渲染和更新的原理，却尚未说起，所以，本节咱们将重点放在vDom的渲染上。

进入正题

咱们把React元素分为text，basic，custom三种，并分别封装了三种vDom的ReactComponent，用来处理各自的渲染和更新，在这里，咱们将重心放在各自ReactComponet的mount方法上。

ReactTextComponent

ReactTextComponent用来处理文本节点，为了标识方便，在返回的内容上加了span标签。

// 用来表示文本节点在渲染，更新，删除时应该作的事情
class ReactTextComponent extends ReactComponent {
  // 渲染
  mountComponent(rootId) {
    this._rootNodeId = rootId
    return `<span data-reactid="${rootId}">${this._vDom}</span>`
  }
}
//代码地址：src/react/component/ReactTextComponent.js

ReactTextComponent的mount方法很是简单，打上标识符，将内容插入标签内，并把标签内容返回就能够了。

ReactDomComponent

这个类用来处理原生节点的vDom，在将vDom渲染为原生DOM时，要考虑3点：

1. 元素类型
2. 拼凑属性，包含普通属性及事件的处理
3. 子节点的递归渲染

代码以下：

// 用来表示原生节点在渲染，更新，删除时应该作的事情
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]}`
      }
    }

    // 获取子节点渲染出的内容
    children.forEach((item, index) => {
      // 再次使用工厂方法实例化子节点的component，拼接好返回
      const childComponent = instantiateReactComponent(item)
      childComponent._mountIndex = index

      childComponents.push(childComponent)

      // 子节点的rootId是父节点的rootId加上索引拼接的值
      const curRootId = `${this._rootNodeId}.${index}`
      // 获得子节点的渲染内容
      const childMarkup = childComponent.mountComponent(curRootId)
      // 拼接
      content += childMarkup

      // 保存全部子节点的component
      this._renderedChildComponents = childComponents
    })

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

在React的官方实现中，本身实现了一套事件系统，这里用了jQuery的事件代替。
在样式上，须要基于传入的style对象建立样式，这里也暂时忽略了。

ReactCompositComponent

在建立自定义组件时，一般会这样建立

import React from 'react'

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

因此，第一步，咱们先实现Component这个父类

// 全部自定义组件的父类
class Component {
  constructor(props) {
    this.props = props
  }

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

Component类上咱们主要实现了setState方法，至于有什么用，咱们放在更新里说。
在自定义组件的vDom中，type保存的是咱们建立的Component的引用，因此在ReactCompositeComponent的mount方法中。咱们首先根据vDom的type建立组件的实例，在以此调用它初始渲染的生命周期方法，render方法。
在render方法中，返回了组件渲染内容的vDom，咱们根据这个vDom建立它的ReactComponent并调用mount(),就获得了真实的渲染内容。
贴代码：

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()

    // 调用自定义组件的render方法，返回一个Vdom
    const renderedVdom = inst.render()

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

    // 获得渲染以后的内容
    const renderMarkup = renderedComponent.mountComponent(this._rootNodeId)

    // 在React.render方法最后触发了mountReady事件，所在在这里监听，在渲染完成后触发
    $(document).on('mountReady', () => {
      inst.componentDidMount && inst.componentDidMount()
    })

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

从这里能够看出，自定义组件的mount方法并不负责具体的渲染，这些都交给了它的render，它把重心放在了建立对象和调用生命周期上。

总结

文章到这，咱们的简易版react已经初步实现了虚拟DOM的建立，生命周期的调用，虚拟DOM的递归渲染和事件处理。
总结一下，每个vDom都有ReactComponent相对应，递归渲染的本质无非就是获取每一个vDom的ReactComponent,并调用它的mount方法。
以上就是整个渲染的思路，下节咱们将实现它的diff算法以及更新。
下一节地址：https://segmentfault.com/a/11...

参考资料，感谢几位前辈的分享：
https://www.cnblogs.com/sven3...
https://github.com/purplebamb...陈屹 《深刻React技术栈》