React 入门：自己动手构建一个迷你 React

2023-10-05 19:55:16

从头开始构建迷你 React：深入了解 React 原理

虚拟 DOM 的力量

React 的核心在于虚拟 DOM ，它是一种 JavaScript 对象，了您希望在浏览器中呈现的内容。虚拟 DOM 使 React 能够高效地更新 UI，仅渲染发生变化的部分。

步骤 1：创建一个虚拟 DOM

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

渲染器：将虚拟 DOM 变为现实

渲染器负责将虚拟 DOM 转换为实际的 DOM 元素。

步骤 2：创建一个渲染器

function render(element, root) {
  const domElement = createElementFromVirtualElement(element);
  root.appendChild(domElement);
}

组件：可重用的构建块

组件是可重用的代码块，可接受属性并基于这些属性呈现内容。

步骤 3：创建一个组件

class Component {
  constructor(props) {
    this.props = props;
  }

  render() {
    return createElement("div", this.props);
  }
}

将它们组合起来：一个迷你 React 的诞生

将虚拟 DOM、渲染器和组件结合起来，就可以构建一个迷你 React。

步骤 4：把它们组合起来

const MyComponent = new Component({
  children: [
    createElement("h1", null, "我的迷你 React"),
    createElement("p", null, "这是一个用纯 JavaScript 实现的迷你 React。"),
  ],
});

render(MyComponent, document.getElementById("root"));