MattCraftsCode / mini-react

🎉精简 React 模型( Help you learn more efficiently react source code )

mini-react

实现核心的 React 模型，用于深入学习 React， 让你更轻松的理解 React 的核心逻辑

• 按最小功能 commit，查看历史提交 + debugger 即可读懂代码
• 准备了大量的 example，通俗易懂，方便初学者入门

其他仓库:

• mini-react-router
• mini-redux

Usage

install

yarn install

copy example

copy ./src/examples/xx.js ->  ./src/index.js

run it

yarn start

build

yarn build

example

import ReactDOM from "../react-dom";
import React from "../react";

class Welcome extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      foo: "bar",
    };
  }

  render() {
    return <div>Welcome, {this.props.name}</div>;
  }
}

const element = <Welcome name="test"></Welcome>;

ReactDOM.render(element, document.getElementById("root"));

Why

当我们需要深入学习 React 时，我们就需要看源码来学习，但是像这种工业级别的库，源码中有很多逻辑是用于处理边缘情况或者是兼容处理逻辑，是不利于我们学习的。

我们应该关注于核心逻辑，而这个库的目的就是把 React 源码中最核心的逻辑剥离出来，只留下核心逻辑，以供大家学习。

How

基于 React 的功能点，一点一点的拆分出来。

从 0 到 1 实现一个核心的 React 模型，实现了 React 最常用的功能：React、ReactDOM 两个核心模块、类和函数组件渲染、完整的生命周期、hooks

Support

component

• [√] 支持函数组件、类组件渲染
• [√] State 和视图更新逻辑
• [√] 组件 ref
• [√] 常用的生命周期
• [√] Context
• [√] PureComponent
• [√] React.memo

hooks

用自己的 hooks 支持现有的 demo 运行

• [√] useReducer
• [√] useEffect & useLayoutEffect
• [√] useRef
• [√] useCallback、useMemo
• [√] React.Children

Other

• [√] 高阶组件、Render Props
• [√] 合成事件、state 批量执行

TODO

• AST 解析 JSX（目前用的 babel）
• mini-cra