React18

基于18.3.1源码进行分析和手写

1. 源码解析文章中的流程图：核心代码展示
2. 源码解析文章：基于流程图进行核心代码分析
3. 手写代码：基于文章分析的核心代码进行最小化工程的实现

项目目录

• debug-demo是源码文章调试的相关代码
• docs是源码文章的目录
• packages是手写代码存放的目录
• examples是手写代码使用的示例

docs内容概述

React基础

• React18使用详解
• React如何使用css
• React路由
• Redux状态管理多种模式
• SSR&CSR

前置知识 & 原理初探

• (WIP)build-your-own-react总结
• React项目结构

React手写

源码解析中整理的流程图以及根据流程图进行具体的代码分析本质就是mini-react的雏形

• 根据博客中的源码解析 => 构建更加完善的mini-react代码
• 根据更加完善的mini-react代码 => 完善博客中的源码解析的流程图和源码分析流程

难点分析

• Scheduler实现思路.md
• render&commit阶段.md

手写代码

• react
• react-dom
• react-reconciler
• shared

运行调试

pnpm install 

cd examples

pnpm run dev

源码解析

核心流程

• (WIP)首次渲染流程分析(一)
• (WIP)首次渲染流程分析(二)
• (WIP)非并发更新渲染流程分析(一)
• (WIP)非并发更新渲染流程分析(二)
• (WIP)常见hook源码分析
• (WIP)合成事件
• (TODO)并发模式下的渲染更新流程分析

第三方库源码

• (TODO)mobx源码解析
• (TODO)redux源码解析
• (TODO)zustand源码解析
• (TODO)react-router源码解析

参考

1. https://dev.to/vinomanick/create-a-monorepo-using-pnpm-workspace-1ebn
2. https://github.com/vinomanick/pnpm-monorepo