React: 无状态组件生成真实DOM结点

在上一篇文章中，我们总结并模拟了 JSX 生成真实 DOM 结点的过程，今天接着来介绍一下无状态组件的生成过程。

先以下面一段简单的代码举例：

const Greeting = function ({name}) {
  return <div>{`hello ${name}`}</div>;
};

const App = <Greeting name="scott"/>;

console.log(App);

ReactDOM.render(App, document.getElementById('root'));

可以看出，Greeting 是一个无状态组件，我们来看看编译过后的可执行代码：

var Greeting = function Greeting(_ref) {
  var name = _ref.name;

  return React.createElement(
    "div",
    null,
    "hello " + name
  );
};

var App = React.createElement(Greeting, { name: "scott" });

console.log(App);

ReactDOM.render(App, document.getElementById('root'));

我们看到，调用 Greeting 组件时传入的 name 属性，出现在 React.createElement() 方法的第二个参数中，这和前面介绍的 JSX 是一致的，不同的是，React.createElement() 方法的第一个参数不再是一个标签名，而是一个函数引用，指向了我们声明的 Greeting 组件，而 name 属性也作为参数的成员出现在组件内部，这个参数名为 _ref，实则是我们熟知的 props。

下图是我们运行上面代码之后，打印出的 App 数据结构，即虚拟 DOM 结构：

我们再来看一个稍微复杂些的例子：

const Greeting = function ({name}) {
  return (
    <div>{`hello ${name}`}</div>
  );
};

const Container = function ({children}) {
  return (
    <div className="container">
      {children}
    </div>
  );
};

const App = (
  <Container>
    <Greeting name="scott"/>
    <Greeting name="jack"/>
    <Greeting name="john"/>
  </Container>
);

console.log(App);

ReactDOM.render(App, document.getElementById('root'));

在上面代码中，我们定义了两个无状态组件，其中 Container 用来作为外层的容器，Greeting 则用来显示实际的业务视图。

现在再来看看编译后的代码结构：

var Greeting = function Greeting(_ref) {
  var name = _ref.name;

  return React.createElement(
    "div",
    null,
    "hello " + name
  );
};

var Container = function Container(_ref2) {
  var children = _ref2.children;

  return React.createElement(
    "div",
    { className: "container" },
    children
  );
};

var App = React.createElement(
  Container,
  null,
  React.createElement(Greeting, { name: "scott" }),
  React.createElement(Greeting, { name: "jack" }),
  React.createElement(Greeting, { name: "john" })
);

console.log(App);

ReactDOM.render(App, document.getElementById('root'));

这次我们主要观察 Container 的结构，它实际上是将 React.createElement() 方法的第三个参数作为 props.children 传递到了组件内部，而这个 children 是一个 Greeting，最终是将 Greeting 渲染在 Container 组件内部。

接下来，我们要改进一下之前实现的 React.createElement() 和 ReactDOM.render() 方法，使它们支持组件的形式，模拟生成虚拟 DOM 和真实 DOM。

先来看看 React.createElement() 方法：

const React = {
  // 创建DOM描述对象 即虚拟DOM
  createElement(type, props, ...children) {
    let propsChildren = children;

    // 组件参数的props.children本身是数组
    // 所以调用组件函数时这里需要特殊处理
    if (Array.isArray(children[0])) {
      propsChildren = children[0];
    }

    // 结点
    let vnode = {
      type,
      props: {
        ...props,
        children: propsChildren,
      }
    };

    // 挂载组件函数体的虚拟DOM
    if (typeof type === 'function') {
      vnode.body = type({
        ...props,
        children,
      });
    }

    return vnode;
  }
};

上面的代码主要对组件做了特殊处理。如果当前处理对象是组件，则对应的 type 就是函数的引用，我们会调用这个组件函数，然后将函数体的结果作为 body 属性挂载到该结点上。需要注意的是，我们在上面方法参数中使用了可变参数的形式，如果直接引用这个 children，它本身就是一个变参数组，如果组件体内使用了 props.children，那么在调用 React.createElement() 时，变参数组的形式将会是 [[...]]，所以我们需要特殊处理一下。

现在，我们运行程序，看看上面代码生成的虚拟 DOM 结构：

最后，再来看看 ReactDOM.render() 方法：

const ReactDOM = {
  // 渲染真实DOM
  render(vnode, container) {
    let realDOM = this.generateDOM(vnode);
    container.appendChild(realDOM);
  },
  // 获取真实DOM
  generateDOM(vnode) {
    if (typeof vnode.type === 'function') {
      // 将组件函数体的虚拟DOM生成真实DOM
      return this.generateDOM(vnode.body);
    }

    let elem = document.createElement(vnode.type);
    // 特殊key值映射
    let specialKeyMap = {
      className: 'class',
      fontSize: 'font-size',
    };
    let {props} = vnode;

    // 设置DOM属性
    props && Object.keys(props).forEach(key => {
      if (key === 'children') {
        // 处理子节点
        props.children.forEach(child => {
          if (typeof child === 'string') {
            // 纯内容节点
            elem.appendChild(document.createTextNode(child));
          } else {
            // DOM节点
            elem.appendChild(this.generateDOM(child));
          }
        });
      } else if (key === 'style') {
        // 设置样式属性
        let styleObj = props.style;
        let styleItems = [];

        Object.keys(styleObj).forEach(styleKey => {
          styleItems.push(`${specialKeyMap[styleKey] || styleKey}:${styleObj[styleKey]}`);
        });

        elem.setAttribute('style', styleItems.join(';'));
      } else {
        // 设置其他属性
        elem.setAttribute(specialKeyMap[key] || key, props[key]);
      }
    });

    return elem;
  }
};

上面代码中改动较小，我们只添加了几行针对组件的处理逻辑，如果是组件函数，则将函数体的虚拟 DOM 生成真实 DOM。

最后，我们来看看最终生成的 DOM 结构：