实现mini-react之组件render方法详解

在上一章中，我们已经实现了普通节点的 render 方法。本章我们将实现类组件以及函数组件的 render 方法。

类组件的 render 方法相对简单，它只需要返回一个虚拟DOM节点即可。虚拟DOM节点可以是一个普通节点，也可以是一个类组件或函数组件。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

函数组件的 render 方法与类组件的 render 方法类似，它也只需要返回一个虚拟DOM节点。不过，函数组件的 render 方法不能使用 this 。

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

如果组件需要动态地生成虚拟DOM节点，则可以使用 createElement() 方法。createElement() 方法可以接受三个参数：第一个参数是组件的标签名，第二个参数是组件的属性，第三个参数是组件的子节点。

const MyComponent = () => {
  const name = 'John Doe';
  return (
    React.createElement(
      'div',
      { className: 'user' },
      React.createElement('h1', null, `Hello, ${name}!`)
    )
  );
};

组件的 render 方法还可以返回 null 或 undefined。如果组件的 render 方法返回 null 或 undefined，则该组件不会被渲染到页面上。

class MyComponent extends React.Component {
  render() {
    return null;
  }
}

组件的 render 方法还可以返回一个数组。如果组件的 render 方法返回一个数组，则该组件的所有子组件都会被渲染到页面上。

class MyComponent extends React.Component {
  render() {
    return [
      <div>Hello, world!</div>,
      <div>Goodbye, world!</div>
    ];
  }
}

总结

组件的 render 方法是组件最重要的一个方法，它负责生成组件的虚拟DOM节点。虚拟DOM节点是组件在页面上的表现形式。组件的 render 方法可以返回一个普通节点、一个类组件、一个函数组件、null、undefined 或一个数组。