窥见 React 底层：从手写 createElement 与 render 入门

2023-12-04 03:01:22

React 是一个强大的 JavaScript 库，用于构建用户界面。它使用声明式编程范式，使得编写和维护复杂的 UI 变得更加容易。React 的核心概念之一是虚拟 DOM，它是一种与真实 DOM 非常相似的内存中的数据结构，React 通过比较虚拟 DOM 与真实 DOM 之间的差异来更新 UI，从而提高了性能和效率。

为了更好地理解 React 的工作原理，我们将从头开始实现两个核心函数：createElement 和 render。createElement 函数用于创建 React 元素，这些元素是 React 应用中的基本构建块，表示 UI 的组成部分。render 函数则将 React 元素渲染到真实 DOM 中，将 UI 显示在浏览器中。

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map((child) => typeof child === "object" ? child : createTextElement(child))
    }
  };
}

function createTextElement(text) {
  return {
    type: "TEXT_ELEMENT",
    props: {
      nodeValue: text
    }
  };
}

function render(element, container) {
  const dom = document.createElement(element.type);

  for (const prop in element.props) {
    if (prop === "children") {
      element.props.children.forEach((child) => render(child, dom));
    } else {
      dom[prop] = element.props[prop];
    }
  }

  container.appendChild(dom);
}