我开源了一个 React like 框架-CSDN博客

本文链接：https://blog.csdn.net/MrWangJustToDo/article/details/129970750

身为一个前端爱好者，我最大的兴趣就是研究各种有趣的东西，下面介绍一下个人的开源项目，希望也能够对感兴趣的人提供帮助。

简单介绍

@my-react 项目是一个 React like 的开源框架，整个核心部分采用 Typescript 开发，并且也提供了类似于 React 的包结构，不同的包负责不同的功能模块，在 api 层面实现了对 React/ReactDOM 的完整替换，并且能够兼容现有的基本所有 React 生态，是居家学习、测试debug的不二之选 ~

项目结构

├── package.json
├── scripts
|   └── 用于项目build的脚本文件
├── packages
│   ├── myreact        # @my-react/react 等同 react
│   ├── myreact-dom    # @my-react/react-dom 等同 react-dom
│   ├── myreact-jsx    # @my-react/react-jsx jsx-runtime相关
│   ├── myreact-reconciler  # @my-react/react-reconciler  主体逻辑，跨平台支持
|   ├── myreact-reactivity # @my-react/react-reactive 扩展的一点东西
│   ├── myreact-refresh # @my-react/react-refresh  开发热更新
│   ├── myreact-refresh-webpack # @my-react/react-refresh-webpack webpack插件（not stable yet）
│   └── myreact-shared  # @my-react/react-shared  公共模块
├── site
|   └── main site 需要的一些依赖
├── ui
|   ├── csr-example  # client side render example
|   └── ssr-example  # server side render example, 同时也是项目main site 
├── tsconfig.json
└── 杂七杂八配置

更加详细的可以自行查看项目代码，项目中的 site example 都是通过 @my-react 进行驱动。

与React的异同

首先该项目最初是一个用于个人学习的项目，所以鉴于个人水平有限，代码中也会存在未知的问题或者写的不好的地方，下面简单说一下这个项目和 React 相比有什么相同和不同。

相同点，都有基本一致的 api，相同的运行逻辑 (concurrent mode、fiber、class / function)等，在体验上基本一致
不同点，React 的更新都会从 root 开始进行 loop，然后跳过未更改的 node，而 @my-react 一般情况会从触发更新的节点开始。React 通过两棵 fiber tree 来支持可打断的渲染任务而 @my-react 目前不支持。React 通过基于内建事件系统的优先级来安排更新，@my-react 目前只有简单的同步和 concurrent 任务