data.md

《React 设计原理》纸质书全部示例

注：所有示例使用各框架的官方repl或者codesandbox编辑，如果无法打开请考虑科学上网

示例 1-1

细粒度更新实现

地址

示例 1-2

Svelte示例的基础组件

地址

示例 1-3

Svelte示例，count可变化的基础组件

地址

示例 1-4

Vue3示例，count可变化的基础组件

地址

示例 1-5

Vue3模版编译

地址

示例 2-1

我们有个更新很耗时的大列表，让我们看看同步更新和异步更新时，输入框的响应速度

可以从 Demo 看到，当牺牲了列表的更新速度，React大幅提高了输入响应速度，使交互更自然。

地址

示例 2-2

count默认为 0，每次点击按钮count++

列表中 3 个li的值分别为 1，2，3 乘以count的结果

地址

示例 2-3

count默认为 0，每次点击按钮count = count + 1，观察使用并发特性（useTransition）后开启的并发更新

地址

示例 2-4

count默认为 0，每次点击按钮count = count + 1

地址

示例 2-5

本书推荐方式和官方方式

地址

示例 3-1

运行本书推荐方式对应项目，使用src/demo/RenderPhaseDemo.tsx调试render阶段工作流程

示例 3-2

自制ReactDOM Renderer

地址

示例 4-1

运行本书推荐方式对应项目，使用src/demo/CommitPhaseDemo.tsx调试commit阶段工作流程

示例 4-2

Suspense在新旧版本行为的区别

官方讨论见Behavioral changes to Suspense in React 18 #7

改变示例中的CREATE_ROOT常量，打开控制台，审查元素，对比是否开启并发更新带来的区别

地址

示例 4-3

运行本书推荐方式对应项目，使用src/demo/ErrorCatchDemo.tsx调试错误处理工作流程

示例 5-1

Scheduler实现调度流程，提供两种使用方式：

1. 在线 Demo 地址

2. 运行本书推荐方式对应项目，使用src/demo/MiniSchedulePhase调试

示例 5-2

点击Demo中的CLICK ME，观察请求途中数字是否能继续变化

老模型下有 bug 版本的地址 新模型下没 bug 版本的地址

示例 5-3

即使在未开启并发特性时，触发更新后也无法立刻获取更新后的值

地址

示例 5-4

Batched Updates

地址

示例 5-5

用三款框架实现Batched Updates，打印结果不同：

React

Vue3

Svelte

示例 6-1

事件系统简易实现，提供 2 种使用方式：

1. 在线 Demo 地址

2. 运行本书推荐方式对应项目，使用src/demo/MiniEventSystem调试

示例 6-2

性能优化示例：在线 Demo 地址

示例 6-3

Context面对bailout策略的示例：在线 Demo 地址

示例 6-4

应用 1

应用 1 优化后

应用 2

应用 2 优化后

示例 7-1

1. 在线 Demo 地址

2. 运行本书推荐方式对应项目，使用src/demo/MiniDiff调试

示例 8-1

1. 在线 Demo 地址

2. 运行本书推荐方式对应项目，使用src/demo/SuspenseDemo/demo2.tsx调试

示例 8-2

1. 在线 Demo 地址

2. 运行本书推荐方式对应项目，使用src/demo/MiniUseState/index.ts调试

示例 8-3

在线 Demo 地址

示例 8-4

在线 Demo 地址

示例 8-5

在线 Demo 地址

示例 8-6

1. 在线 Demo 地址

2. 运行本书推荐方式对应项目，使用src/demo/TransitionDemo/demo1.tsx调试

示例 8-7

1. 在线 Demo 地址

2. 运行本书推荐方式对应项目，使用src/demo/TransitionDemo/demo2.tsx调试

示例 8-8

1. 在线 Demo 地址

2. 运行本书推荐方式对应项目，使用src/demo/TransitionDemo/demo3.tsx调试

示例 8-9

1. 在线 Demo 地址

2. 运行本书推荐方式对应项目，切换分支到use-error-boundary调试，在Comparing changes中查看改动的代码