手搓一个mini-react，新手入门React源码必备！

前端

2024-01-21 13:52:24

前言

React，作为当今最流行的前端框架之一，以其高效性和可维护性而广受好评。而手搓一个mini-react，不仅可以让我们深入理解React的内部原理，还可以为后续学习React源码奠定坚实的基础。

我们的目标

我们的目标是创建一个能够渲染虚拟DOM的mini-react，它将包含以下核心特性：

创建虚拟DOM元素
将虚拟DOM渲染到真实DOM
响应式更新，当状态更新时重新渲染

从头开始

创建虚拟DOM元素

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

此函数接收类型（例如“div”）、属性（例如“id”）和可选的子元素，并返回一个虚拟DOM元素对象。

渲染虚拟DOM

const render = (vnode, container) => {
  const node = createElement(vnode.type, vnode.props);
  node.appendChild(renderChildren(vnode.children));
  container.appendChild(node);
};

此函数接收虚拟DOM元素和一个容器元素，并使用DOM API将虚拟DOM渲染到真实DOM。它递归地渲染子元素。

响应式更新

const useState = (initialValue) => {
  let state = initialValue;
  const updateState = (newState) => {
    state = newState;
    render(rootVnode, container);
  };
  return [state, updateState];
};

此函数允许我们在组件中管理状态。它返回一个包含状态及其更新函数的数组。每次状态更新时，该函数都会重新渲染应用程序。

示例用法

我们现在可以将mini-react用于创建一个简单的应用程序：

const rootVnode = createElement("div", null,
  createElement("h1", null, "Hello, mini-react!"),
  createElement("button", { onClick: () => updateState("world") }, "Click me!")
);
const [state, updateState] = useState("React");
render(rootVnode, document.getElementById("root"));