从零手写一个 Mini React 框架

造轮子是最好的学习方式，本文带你手写一个 Mini React

目标#

实现一个简化的 React 框架，包含以下核心功能：

JSX 编译
虚拟 DOM
组件渲染
生命周期（useState, useEffect）

1. JSX 编译#

1
// JSX -> createElement -> 虚拟DOM
2
function createElement(type, props, ...children) {
3
  return {
4
    type,
5
    props: { ...props, children }
6
  };
7
}
8

9
// 使用
10
const element = createElement(
11
  'div',
12
  { className: 'container' },
13
  createElement('h1', null, 'Hello')
14
);

2. 渲染函数#

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

4
  // 处理属性
5
  Object.keys(element.props).forEach(key => {
6
    if (key !== 'children') {
7
      dom[key] = element.props[key];
8
    }
9
  });
10

11
  // 递归渲染子元素
12
  element.props.children.forEach(child => {
13
    render(child, dom);
14
  });
15

16
  container.appendChild(dom);
17
}

3. 实现 useState#

1
let state = null;
2
let index = 0;
3

4
function useState(initialValue) {
5
  const currentIndex = index;
6
  const currentState = state || initialValue;
7

8
  const setState = (newValue) => {
9
    state = newValue;
10
    index = 0; // 重置索引
11
    renderApp(); // 重新渲染
12
  };
13

14
  index++;
15
  return [currentState, setState];
16
}

4. 实现 useEffect#

1
const effects = [];
2

3
function useEffect(callback, deps) {
4
  const currentEffect = {
5
    callback,
6
    deps,
7
    cleanup: null
8
  };
9

10
  const hasChanged = !effects.length ||
11
    !deps.every((d, i) => d === effects[i].deps?.[i]);
12

13
  if (hasChanged) {
14
    // 执行清理函数
15
    if (effects[effects.length - 1]?.cleanup) {
16
      effects[effects.length - 1].cleanup();
17
    }
18
    // 执行副作用
19
    currentEffect.cleanup = callback();
20
  }
21

22
  effects.push(currentEffect);
23
}

完整代码#

1
const state = [];
2
let componentState = [];
3

4
export function useState(initialValue) {
5
  const i = componentState.length;
6
  componentState[i] = componentState[i] || initialValue;
7

8
  const setState = (newValue) => {
9
    componentState[i] = newValue;
10
    // 触发重新渲染
11
  };
12

13
  return [componentState[i], setState];
14
}
15

16
export function render(vnode, container) {
17
  const dom = document.createElement(vnode.type);
18

19
  // 属性处理
20
  Object.keys(vnode.props).forEach(key => {
21
    if (key !== 'children') {
22
      dom[key] = vnode.props[key];
23
    }
24
  });
25

26
  // 子节点渲染
27
  vnode.props.children?.forEach(child => {
28
    render(child, dom);
29
  });
30

31
  container.appendChild(dom);
32
}

WARNING
这只是一个简化版本，真实的 React 还要处理 Fiber、Diff 算法、事务机制等复杂逻辑。

总结#

通过手写 Mini React，我们理解了：

JSX 的本质是函数调用
虚拟 DOM 是普通 JS 对象
状态管理通过闭包实现