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 结构:

posted @ 2018-07-21 23:18 liuhe688 阅读(...) 评论(...) 编辑 收藏