- 基于react 17 使用 ts 实现了一个 mini-react
- pnpm install
- pnpm start
- 源代码在 packages, 跑起来的实例在 example, 修改 example/index.js 即可
- 该仓库主要是实现一个 mini 版的 react,所以在整体流程和命名都会尽可能跟 react 保持一致。但是 react 一些函数实现会比较长,为了保持更好的阅读性,自己会去拆分函数,所以跟 react 对比可能会不一致。
- 虽然现在 react 版本已经到 18 了,但是因为 react 源码太复杂了,市面上也很少有实现 react18 的 mini 库。所以选择了有跟多参考资料的 17, 这个版本对比最新的 react18 基本的流程,实现并没有太大的改变,所以学习 17 算是一个不错的选择
- 抛弃了 ClassComponent,只支持 FunctionComponent
- 因为只是学习使用,所以没有做语法错误处理。
- fiber 首屏渲染
- fiber 更新渲染
- hook 支持(useState, useEffect, useLayoutEffect, useRef, useCallback, useMemo)
- key diff, 简单的 props diff
- 合成事件,react合成事件太复杂。所以自己实现了一个简单的合成事件(目前只支持了 onClick 事件)。参考了这里
- scheduler 任务调度
- react 更新的一些优化路径(bailout)
- 基于 expirationTime 的 react concurrent 模式(简单的优先级插队以及饥饿现象)。lanes 模型的 concurrent 看不懂......
- 实现简单的 renderToString
- 实现 Fragment, React.memo
-
scheduler 任务调度 -
react concurrent 模式 -
react 更新的一些优化路径(bailout) -
增加 concurrent 模式例子,验证代码是否存在 bug -
引入 pnpm 替代 npm -
完成 useMemo, memo 等API -
引入 eslint -
引入 单元测试 - 输出文章
- 使用 rollup 打包