Skip to content

JokerLHF/mini-react-web

Repository files navigation

版本信息

  • 基于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

TODO

  • scheduler 任务调度
  • react concurrent 模式
  • react 更新的一些优化路径(bailout)
  • 增加 concurrent 模式例子,验证代码是否存在 bug
  • 引入 pnpm 替代 npm
  • 完成 useMemo, memo 等API
  • 引入 eslint
  • 引入 单元测试
  • 输出文章
  • 使用 rollup 打包

学习笔记(持续更新中...)

参考资料

react

前端工具

About

基于 react17 实现 mini react

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published