React.createElement与ReactDOM.render的从无到有的实现

前端

2023-10-04 16:36:12

React.createElement：虚拟DOM的起点

React.createElement是React中用于创建虚拟DOM元素的函数。它接受三个参数：

type：表示要创建的元素类型，可以是字符串（例如"div"或"span"）、函数组件或类组件。
props：一个对象，包含要传递给元素的属性。
children：一个数组，包含要作为元素子元素的其他React元素。

createElement的返回值是一个虚拟DOM元素，它是一个轻量级的JavaScript对象，表示真实DOM元素。虚拟DOM元素包含了元素的类型、属性和子元素等信息。

ReactDOM.render：虚拟DOM的渲染器

ReactDOM.render是React中用于将虚拟DOM元素渲染到真实DOM中的函数。它接受两个参数：

reactElement：要渲染的虚拟DOM元素。
container：要将虚拟DOM元素渲染到的容器元素，通常是HTML元素。

ReactDOM.render会将虚拟DOM元素与真实DOM进行比较，并只更新那些发生变化的元素。这种差异化更新机制是React性能优异的关键所在。

实现一个简易的React库

现在，让我们从头开始实现一个简易的React库，它将包含React.createElement和ReactDOM.render这两个函数。

1. 创建React.createElement函数

function createElement(type, props, ...children) {
  return {
    type,
    props: props || {},
    children: children || [],
  };
}

2. 创建ReactDOM.render函数

function render(reactElement, container) {
  // 将虚拟DOM元素转换成真实DOM元素
  const domElement = createDOMElement(reactElement);

  // 将真实DOM元素添加到容器元素中
  container.appendChild(domElement);
}

function createDOMElement(reactElement) {
  // 如果是字符串元素，直接创建一个文本节点
  if (typeof reactElement === "string") {
    return document.createTextNode(reactElement);
  }

  // 如果是函数组件，则先调用函数组件生成虚拟DOM元素，再转换成真实DOM元素
  if (typeof reactElement.type === "function") {
    const newReactElement = reactElement.type(reactElement.props);
    return createDOMElement(newReactElement);
  }

  // 如果是类组件，则先创建类组件实例，再调用实例的render方法生成虚拟DOM元素，最后转换成真实DOM元素
  if (reactElement.type.prototype.isReactComponent) {
    const componentInstance = new reactElement.type(reactElement.props);
    const newReactElement = componentInstance.render();
    return createDOMElement(newReactElement);
  }

  // 如果是普通元素，则创建一个真实DOM元素
  const domElement = document.createElement(reactElement.type);

  // 设置元素属性
  for (const prop in reactElement.props) {
    if (prop === "className") {
      domElement.className = reactElement.props[prop];
    } else if (prop === "style") {
      for (const styleProp in reactElement.props[prop]) {
        domElement.style[styleProp] = reactElement.props[prop][styleProp];
      }
    } else {
      domElement[prop] = reactElement.props[prop];
    }
  }

  // 递归创建子元素
  reactElement.children.forEach(child => {
    const childDOMElement = createDOMElement(child);
    domElement.appendChild(childDOMElement);
  });

  return domElement;
}

3. 使用我们的简易React库

现在，我们已经实现了React.createElement和ReactDOM.render这两个函数，就可以使用它们来编写简单的React应用程序了。

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a simple React application.</p>
    </div>
  );
};

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