从零开始写一个 React：初始化渲染

栏目: 服务器 · 发布时间: 7年前

内容简介：从零开始写一个 React：初始化渲染

初始化渲染

『从零开始写一个 React』 将会是一个小系列，记录学习 React 源码的过程，并逐步实现一个简易的类 React 库。

这是本系列的第一篇文章，该文章将阅读 React 初始化渲染相关的代码，并实现一个简单的将 JSX 渲染到页面的功能。（不包括组件生命周期与事件处理相关部分）

源码解析：渲染过程

JSX 解析

我们知道在 React 组件 render() 返回的是 JSX，而 JSX 将会被 babel 转换。JSX 将被转换为 React.createElement(type, config, children) 的形式。 

// App.js
// 转换前
Class App extends Component {
    render() {
        return <h1 id='title'>Hello World<h1>
    }
}

// 转换后
var App = React.createClass({
    render() {
        return React.createElement('h1', {
            id: 'title'
        }, 'hello world')
    }
})

React.createElement() 的实现位于 /src/isomorphic/classic/element/ReactElement.js

这里的 React.createElement() 是用来生成虚拟 DOM 元素，该函数对组件的属性，事件，子组件等进行了处理，并返回值为一个 ReactElement 对象（单纯的 JavaScript 对象，仅包括 type, props, key, ref 等属性）。

这恰好说明了 JSX 中的 <h1 id='title'>hello world</h1> 实际上是 JavaScript 对象，而不是我们通常写的 HTML 标签。

渲染到页面

单单声明了组件而没有渲染到页面上我们是看不见的（废话），所以我们需要使用 ReactDOM.render() 将其渲染到页面指定位置上。 

// index.html
<html>
    // ...
    <body>
        <div id='root'></div>
    </body>
</html>


// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'

ReactDOM.render(<App />, document.getElementById('root'))

ReactDOM.render() 的实现位于 /src/renderers/dom/client/ReactMount.js

ReactDOM.render() 函数将会根据 ReactElement 的类型生成相对应的 ReactComponent 实例，并调用其 mountComponent() 函数进行组件加载（返回 HTML片段），递归加载所有组件后，通过 setInnerHTML 将 HTML 渲染到页面上。

判断需要生成那种 ReactComponent 实例根据 ReactElement 对象的 type 属性来决定。对应 HTML 标签的 type 一般为字符串，而自定义的组件则是大写字母开头的组件函数（自定义组件需要 import，而 HTML 标签不需要）。

生成ReactComponent

React 中生成对应的 ReactComponent 实例由 instantiateReactComponent() 完成，其实现位于 /src/renderers/shared/stack/reconciler/instantiateReactComponent.js

ReactComponent 分为 3 种：

  • ReactEmptyComponent : 空组件（ReactElement 的 type 属性为 null 或 false 的组件），在浏览器中返回 ReactDOMEmptyComponent 。

  • ReactHostComponent : 原生组件（ReactElement 为string，number 或 ReactElement 的 type 属性为 string 的组件）。

    • createInternalComponent() ：该函数用于创建原生组件，在浏览器中返回 ReactDOMComponent 。

    • createInstanceForText() : 该函数用于创建纯文本组件，在浏览器中返回 ReactDOMTextComponent 。

  • ReactCompositeComponent : 自定义组件（ReactElement 的 type 属性为 function）

可以发现 React 与平台解耦，使用 ReactEmptyComponent 与 ReactHostComponent 。而这两种组件会根据平台的不同生成不同的组件对象，在浏览器中则为 ReactDOMEmptyComponent 、 ReactDOMComponent 与 ReactDOMTextComponent 。

它们通过 /src/renderers/dom/stack/client/ReactDOMStackInjection.js 进行注入。

（ /src/renderers 路径下包含各个平台上不同的 ReactComponent 实现，包括 react-art/react-dom/react-native。）

从零开始：实现初始化渲染

设置 babel

首先我们需要了解 babel 如何转换 JSX： React JSX transform 。

babel 可以通过 transform-react-jsx 插件来设置解析 JSX 之后调用的函数，默认解析为调用 React.createElement() 。所以这就是为什么虽然在 JSX 代码中没有使用到 React，却仍然需要导入它。

通过配置 transform-react-jsx 插件的 pragma 选项可以修改解析后调用的函数。 

// 修改解析为调用 dom() 函数
{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "dom" // 默认 pragma 为 React.createElement
    }]
  ]
}

babel 将会把 JSX 中的标签名作为第一个参数，把 JSX 中的标签属性作为第二个参数，将标签内容作为剩余的参数。传递这些参数给 pragma 选项设置的函数。

PS: 为了方便起见，我们使用默认的解析为 React.createElement()

实现 createElement

createElement() 接受至少 2 个参数：元素类型 type（字符串表示原生元素，函数表示自定义元素），元素设置 config。其他参数视为元素的子元素 children。并且该函数返回的是一个 ReactElement 对象，属性包括 type, props, key, ref。 

// element.js
class ReactElement {
    constructor(type, props, key, ref) {
        this.type = type
        this.props = props
        this.key = key
        this.ref = ref
    }
}

export function createElement(type, config, ...children)｛
    // ...
    return new ReactElement(type, props, key, ref)
｝

然后需要导出 createElement ，才能够通过 React.createElement() 的方式调用。 

// index.js
import { createElement } from './element'

const React = {
    createElement,
}

export default React

ReactElement 需要 props, key 与 ref 参数，这三个参数将通过处理 config 与 children 得到。

我们将从 config 中获取 key 与 ref（若它们存在的话），并且根据 config 得到 props (去除一些不必要的属性)，同时将 children 添加到 props 当中。

export function createElement(type, config, ...children) {
  let props = {}
  let key = null
  let ref = null

  if (config != null) {
    ref = config.ref === undefined ? null : config.ref
    // 当 key 为数字时，将 key 转换为字符串
    key = config.key === undefined ? null : '' + config.key

    for (let propsName in config) {
      // 剔除一些不需要的属性（key, ref, __self, __source）
      if (RESERVED_PROPS.hasOwnProperty(propsName)) {
        continue
      }

      if (config.hasOwnProperty(propsName)) {
        props[propsName] = config[propsName]
      }
    }

    props.children = children
  }

  return new ReactElement(type, props, key, ref)
}

除此之外，添加对 defaultProps 的支持。 defaultProps 的使用方式如下： 

// App.js
class App extends Component {
}

App.defaultProps = {
    name: "ahonn"
}

当传入 App 组件的 props 中不包含 name 时，设置默认的 name 为 "ahonn"。具体实现：当 ReactElement 的 type 属性为组件函数且包含 defaultProps 时遍历 props，若 props 中不包含 defaultProps 中的属性时，设置默认的 props。

export function createElement(type, config, ...children) {
    // ...
    if (type && type.defaultProps) {
        let defaultProps = type.defaultProps
        for (let propsName in defaultProps) {
            if (props[propsName] === undefined) {
                props[propsName] = defaultProps[propsName]
            }
        }
    }
}

目前为止完成了将 JSX 解析为函数调用（这部分由 babel 完成），调用 React.createElement() 生成 ReactElement 对象。

接下来将实现 instantiateReactComponent() ，通过 ReactELemnt 生成相对应的 ReactComponent 实例。

实现工厂方法 instantiateReactComponent

instantiateReactComponent(element) 接受一个参数 element，该参数可以是 ReactElement 对象，string，number，false 或者 null。

我们将只考虑 Web 端，而不像 React 一样使用适配器模式进行解耦。

ReactElement 生成相应 ReactComponent 实例的规则：

  • element 为 null 或 false 时，生成 ReactDOMEmptyComponent 对象实例

  • element 为 string 或者 number 时，生成 ReactDOMTextComponent 对象实例

  • element 为 object

    • element.type 为 string 时，生成 ReactDOMComponent 对象实例

    • element.type 为 function（组件函数）时，生成 ReactCompositeComponent 对象实例

// virtual-dom.js
export function instantiateReactComponent(element) {
  let instance = null
  if (element === null || element === false) {
    instance = new ReactDOMEmptyComponent()
  }

  if (typeof element === 'string' || typeof element === 'number') {
    instance = new ReactDOMTextComponent(element)
  }

  if (typeof element === 'object') {
    let type = element.type
    if (typeof type === 'string') {
      instance = new ReactDomComponent(element)
    } else if (typeof type === 'function'){
      instance = new ReactCompositeComponent(element)
    }
  }
  return instance
}

实现 ReactComponent

现在，我们需要有不同的 ReactComponent 类以供 instantiateReactComponent() 使用。同时需要实现每个类的 mountComponent() 方法来返回对应的 HTML 片段。

ReactDOMEmptyComponent

ReactDOMEmptyComponent 表示空组件， mountComponent() 方法返回空字符串。 

class ReactDOMEmptyComponent {
  constructor() {
    this._element = null
  }

  mountComponent() {
    return ''
  }
}

ReactDOMTextComponent

ReactDOMTextComponent 表示 DOM 文本组件， mountComponent() 方法返回对应的字符串。 

class ReactDOMTextComponent {
  constructor(text) {
    this._element = text
    this._stringText = '' + text
    this._rootID = 0
  }

  mountComponent(rootID) {
    this._rootID = rootID
    return this._stringText
  }
}

ReactDOMComponent

ReactDOMComponent 表示原生组件，即浏览器支持的标签（div, p, h1, etc.）。 mountConponent() 方法返回对应的 HTML 字符串。 

class ReactDomComponent {
  constructor(element) {
    let tag = element.type

    this._element = element
    this._tag = tag.toLowerCase()
    this._rootID = 0
  }

  mountComponent(rootID) {
    this._rootID = rootID
    if (typeof this._element.type !== 'string') {
      throw new Error('DOMComponent\'s Element.type must be string')
    }

    let ret = `<${this._tag} `
    let props = this._element.props
    for (var propsName in props) {
      if (propsName === 'children') {
        continue
      }
      let propsValue = props[propsName]
      ret += `${propsName}=${propsValue}`
    }
    ret += '>'

    let tagContent = ''
    if (props.children) {
      tagContent = this._mountChildren(props.children)
    }
    ret += tagContent
    ret += `</${this._tag}>`
    return ret
  }
}

ReactDOMComponent 的 mountComponent() 方法会相对复杂一点。具体实现思路是，通过 ReactElement 的 type 与 props 属性拼接对应的 HTML 标签。处理 props 的时候需要跳过 children 属性，因为需要将子组件放在当前组件中。

当存在子组件（children）时，调用 _mountChildren(children) 将组件转换为对应的 HTML 片段。具体过程是遍历 children，转换为 ReactComponent 并调用其 mountComponent() 方法。 

_mountChildren(children) {
  let result = ''
  for (let index in children) {
    const child = children[index]
    const childrenComponent = instantiateReactComponent(child)
    result += childrenComponent.mountComponent(index)
  }
  return result
}

ReactCompositeComponent

ReactCompositeComponent 表示自定义的组件， mountComponent() 方法将根据提供的组件函数（element.type）实例化，并调用该组件的 render() 方法返回 ReactElement 对象。再通过 instantiateReactComponent() 生成对应的 ReactComponent ，最后执行该 ReactComponent 的 mountComponent() 方法。 

class ReactCompositeComponent {
  constructor(element) {
    this._element = element
    this._rootId = 0
  }

  mountComponent(rootID) {
    this._rootId = rootID
    if (typeof this._element.type !== 'function') {
      throw new Error('CompositeComponent\'s Element.type must be function')
    }

    const Component = this._element.type
    const props = this._element.props
    const instance = new Component(props)

    const renderedElement = instance.render()
    const renderedComponent = instantiateReactComponent(renderedElement)
    const renderedResult = renderedComponent.mountComponent(rootID)
    return renderedResult
  }
}

通过 ReactCompositeComponent 将之前的 ReactComponent 联系起来，并递归调用 mountComponent 方法得到一段 HTML。最后 render() 通过 node.innerHTML 将 HTML 字符串填到页面上对应的容器中。

实现 render

最后将之前的实现串起来，利用 innerHTML 将组件渲染到页面上。

export function render(element, container) {
  const rootID = 0
  const mainComponent = instantiateReactComponent(element)
  const containerContent = mainComponent.mountComponent(rootID)

  container.innerHTML = containerContent
}

到这里就基本上简单的实现了 React 中将组件渲染到页面上的部分。可以通过一个简单的例子验证一下。

// index.js
import React from './tiny-react'
import ReactDOM from './tiny-react'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

// App.js

import React, { Component } from './tiny-react'

class App extends Component {
  render() {
    return (
      <div>
        <span>It is Work!</span>
      </div>
    )
  }
}

export default App

页面上将显示 It is Work!

后记

虽然没有涉及到组件更新与组件生命周期，通过阅读 React 的源码基本上也对初始化渲染的过程有了一定的了解，希望对你有所帮助。

在此感谢 preact , react-lite , react-tiny 等项目，它们为本文提供了很大帮助。

文中的所有代码均于 tiny-react init-render ，感谢阅读。


以上所述就是小编给大家介绍的《从零开始写一个 React：初始化渲染》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
微信小程序运营与推广完全自学手册

微信小程序运营与推广完全自学手册

王洪波 / 电子工业出版社 / 2018-6 / 59

本书是运营管理方面的书籍，将小程序的运营推广问题置千小程序的整个运营管理体系中来谈，主要讲述小程序的定位规划、营销吸粉策略、评估优化这三大方面的内容，这三方面的内容之间是三位一体、密切相关的。 书中通过列举丰富且具有代表性的小程序实际案例来向读者提供些可行的运营推广办法。案例涉及美食类、电商类、旅游类、媒体类等小程序，可供多个行业的小程序运营者参考借鉴。 书中所提供的各种小程序营销策略......一起来看看 《微信小程序运营与推广完全自学手册》 这本书的介绍吧!

码农工具
HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3