以直观的方式呈现 React 渲染的简单实现：从 scratch 开始构建

前端

2023-09-10 22:07:30

React 渲染的核心

React 的渲染过程可以简化为两个主要步骤：

使用 createElement 函数创建 React 元素。
使用 render 函数将 React 元素渲染到 DOM 中。

createElement 函数

createElement 函数是 React 渲染的核心。它接受两个参数：

标签名或组件类型。
属性对象，用于指定元素的属性。

createElement 函数会返回一个 React 元素。React 元素是一个轻量级的对象，它了应该在 DOM 中渲染的内容。

render 函数

render 函数是 React 渲染的另一个核心方法。它接受两个参数：

React 元素。
DOM 节点。

render 函数会将 React 元素渲染到指定的 DOM 节点中。

React 渲染的实现

React 的渲染过程是在 React 源码中的 ReactElement.js 文件中实现的。该文件定义了createElement函数和render函数的实现。

createElement 函数的实现如下：

function createElement(type, config, children) {
  let props = {};
  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }

    self = config.__self;
    source = config.__source;

    for (const propName in config) {
      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
        props[propName] = config[propName];
      }
    }
  }

  // 孩子节点的处理
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = new Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;
  }

  // 返回 React 元素
  return {
    $typeof: REACT_ELEMENT_TYPE,
    type,
    key,
    ref,
    props,
    _owner: self,
    _source: source,
  };
}

render 函数的实现如下：

function render(element, container, callback) {
  // 省略部分代码

  // 查找 DOM 节点
  const containerDOM = findDOMNode(container);

  // 渲染 React 元素到 DOM 节点中
  ReactDOMComponentTree.precacheFiberNode(instance, containerDOM);
  updateContainer(element, containerDOM, null, callback);
}