MINI版React 从0到1 实现

前端

2023-10-20 14:40:40

从头开始打造自己的 React：打造最小版本 React

在 Web 开发的世界中，React 已成为构建用户界面的首选工具。凭借其声明式编程范式和强大的生态系统，React 简化了复杂 UI 的创建和维护。不过，了解 React 背后的原理可以极大地提升你的开发能力。

深入了解 React 的核心

React 的核心由两个基本方法组成：

createElement： 负责创建 React 元素，它们是 React 应用程序的基本构建块。
render： 将 React 元素渲染到 DOM（文档对象模型）中，该模型代表了 HTML 文档的结构。

构建 createElement 方法

要实现 createElement 方法，我们必须创建一个接受两个参数的函数：

type： 要创建的元素的类型（DOM 元素、组件或其他对象）。
props： 传递给元素的属性（对象、字符串或数字）。

createElement 函数会返回一个 React 元素，该元素包含以下属性：

type： 元素的类型。
props： 传递给元素的属性。
children： 元素的子元素。

打造 render 方法

render 方法接受两个参数：

element： 要渲染的 React 元素。
container： 渲染元素的容器。

render 方法负责将元素注入容器中，从而将其呈现在用户面前。

回顾基本概念

理解 React 的基础至关重要，包括：

DOM： HTML 文档的结构化表示，由节点组成的树形结构。
JSX： 一种 JavaScript 扩展，允许你使用类似 HTML 的语法编写 React 元素。
组件： React 中可重用的代码块，可用于构建复杂的 UI。

代码示例：实现最小 React 版本

下面是一个使用 JavaScript 实现 React 最小版本的示例：

const createElement = (type, props, ...children) => {
  return {
    type,
    props: {
      ...props,
      children: children,
    },
  };
};

const render = (element, container) => {
  const domElement = document.createElement(element.type);

  for (const prop in element.props) {
    domElement[prop] = element.props[prop];
  }

  container.appendChild(domElement);
};

const element = createElement('div', { id: 'root' }, 'Hello, React!');
render(element, document.getElementById('app'));