从零实现MiniReact V01：理解React核心原理

前言

React作为前端框架的佼佼者，其核心原理值得我们深入探究。本文将带领大家从零开始实现一个极简版的React（MiniReact），帮助你理解React的基本工作原理。

MiniReact V01的核心功能

在V01版本中，我们将实现以下核心功能：

虚拟DOM（Virtual DOM）的创建
将虚拟DOM渲染到真实DOM
简单的组件渲染系统

项目结构

less 复制代码

/MiniReact/V01
├── core/
│   ├── React.js      // React核心功能实现
│   └── ReactDom.js   // ReactDOM相关功能实现
├── App.js            // 应用组件
├── index.html        // HTML入口文件
└── main.js           // 应用入口文件

实现步骤

1. 创建虚拟DOM

首先，我们需要实现创建虚拟DOM的功能。在React中，虚拟DOM是一个JavaScript对象，用来描述真实DOM的结构。

在React.js中，我们实现了两个关键函数：

js 复制代码

// 创建文本节点的虚拟DOM 后续其实用不着了，放到createElement里一起处理了
function createTextNode(text) {
  return {
    type: "TEXT_ELEMENT",
    props: {
      nodeValue: text,
      children: [],
    },
  };
}

// 创建元素节点的虚拟DOM
function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map((child) =>
        typeof child === "string" ? createTextNode(child) : child
      ),
    },
  };
}

createElement函数接收三个参数：

type：元素类型，如'div'、'span'等
props：元素属性，如'id'、'className'等
...children：子元素，可以是字符串或其他虚拟DOM元素

2. 实现渲染函数

接下来，我们需要实现一个渲染函数，将虚拟DOM转换为真实DOM并插入到容器中：

js 复制代码

function render(el, container) {
  // 根据元素类型创建DOM节点
  const dom =
    el.type === "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(el.type);
      
  // 设置元素属性
  Object.keys(el.props).forEach((key) => {
    if (key !== "children") {
      dom[key] = el.props[key];
    }
  });
  
  // 递归渲染子元素
  const children = el.props.children;
  children.forEach((child) => {
    render(child, dom);
  });

  // 将DOM节点添加到容器中
  container.append(dom);
}

3. 导出React对象

将核心功能封装到React对象中：

js 复制代码

const React = {
  render,
  createElement,
};

export default React;

4. 实现ReactDOM

为了更接近真实React的API，我们创建了ReactDOM.js：

js 复制代码

import React from "./React.js";

const ReactDOM = {
  createRoot(container) {
    return {
      render(App) {
        React.render(App, container);
      },
    };
  },
};

export default ReactDOM;

5. 创建应用组件

在App.js中，我们使用我们的MiniReact创建一个简单的应用组件：

js 复制代码

import React from "./core/React.js";

const App = React.createElement("div", { id: "app" }, "Hi- ", "MiniReact");

export default App;

6. 入口文件

最后，在main.js中，我们将应用组件渲染到DOM中：

js 复制代码

import ReactDOM from "./core/ReactDom.js";
import App from "./App.js";

ReactDOM.createRoot(document.querySelector("#root")).render(App);

运行原理解析

虚拟DOM创建：
- 当我们调用React.createElement("div", { id: "app" }, "Hi- ", "MiniReact")时，会创建一个虚拟DOM对象
- 文本内容"Hi- "和"MiniReact"会被转换为文本节点
渲染过程：
- ReactDOM.createRoot创建一个渲染器
- 调用render方法开始渲染过程
- render函数递归地将虚拟DOM转换为真实DOM
- 首先创建对应的DOM节点
- 然后设置节点的属性
- 最后递归处理子节点
- 将创建好的DOM树插入到容器中

与真实React的区别

我们的MiniReact V01版本实现了React的基本功能，但与真实React相比还有很多不同：

没有实现组件系统（类组件和函数组件）
没有实现状态管理和生命周期
没有实现事件系统
没有实现Fiber架构和调度系统
没有实现Diff算法进行高效更新

总结

通过实现MiniReact V01，我们了解了React的基本工作原理：

使用虚拟DOM描述UI结构
通过渲染函数将虚拟DOM转换为真实DOM
使用递归的方式处理DOM树

这只是React的冰山一角，但理解这些基本概念对于深入学习React非常重要。在后续版本中，我们将逐步实现更多React的核心功能，如组件系统、状态管理、事件处理等。项目地址：github.com/XXUZZWZ/Min... 希望这篇教程能帮助你更好地理解React的核心原理！