响应式系统与React ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 6 天一、本堂课重点内容： R

这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

一、本堂课重点内容：

React的历史与应用

前端应用开发历程
移动原生应用开发
结合 Electron 的桌面应用开发

React的设计思路

UI 编程痛点
响应式与转换式
React 设计与实现 - 组件化
React 设计与实现 – 状态归属问题
React 设计与实现 – 生命周期

React(hooks)的写法与React实现

代码介绍
Live Code
React 的实现基本概要
React 的实现 - Problem 1 & 2
React 的实现 - How to Diff

React 状态管理库与应用级框架科普

React 状态管理库 - 核心思想
React 状态管理库 - 推荐
React 状态管理库 - 状态机
React 状态管理库 - Modern.js/Reduck
应用级框架科普

二、详细知识点介绍：

1.React的历史与应用

[应用]

（1）前端应用开发

如Facebook、Instagram、Netfilx网页版

（2）移动原生应用开发

如Instagram、Discord、Oculist

（3）结合 Electron 的桌面应用开发

[历史]

2010年Facebook在其 php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
2011年Jordan Walke 创造了FaxJS，也就是后来的 React原型。
2012年在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke 基于FaxJS 的经验，创造了React。
2013年 React 正式开源，在2013 JSConf 上 Jordan Walke 介绍了这款全新的框架。
2014任.今天生态大爆发，各种围绕React的新工具/新框架开始涌现

2.React的设计思路

（1）UI 编程痛点

状态更新，U不会自动更新，需要手动地调用DOM进行更新。
欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
u之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。

（2）响应式与转换式

[响应式编程]

状态更新，U自动更新。

“状态更新，U不会自动更新,需要手动地调用DOM进行更新。”

前端代码组件化，可复用，可封装。

“欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”

状态之间的互相依赖关系，只需声明即可。

“UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。”

（3）React 设计与实现 - 组件化

组件是组件的组合/原子组件
组件内拥有状态，外部不可见
父组件可将状态传入组件内部

（4）React 设计与实现 – 状态归属问题

[状态归属]

当前价格属于Root节点
状态属于两个节点向上寻找到最近的祖宗节点

当前价格可以通过函数改变
将onChangeValue()向下传递
(Javascript中，函数是「一等公民)」

[设计与实现]

组件声明了状态和U的映射。
组件有Props/State两种状态。
“组件”可由其他组件拼装而成。

组件代码：

（5）React 设计与实现 – 生命周期

3.React(hooks)的写法与React实现

代码介绍

2. Live Code

3. React 的实现基本概要

JSX不符合JS标准语法
返回的JSX发生改变时，如何更新DOM
State/Props更新时，要重新触发render函数

React 的实现 - Problem 1 & 2 （1）（2）

Virtual DOM(虚拟 DOM)
Virtual DOM是─种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一——对应的关系。

它赋予了React声明式的API:您告诉 React希望让U是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

5. React 的实现 - How to Diff

完美的最小Diff 算法，需要O(n^3)的复杂度。
牺牲理论最小Diff，换取时间，得到了O(n)复杂度的算法:Heuristic On)Algorithm

4.React 状态管理库与应用级框架科普

React 状态管理库 - 核心思想

将状态抽离到UI外部进行统一管理

React 状态管理库 - 推荐

3. React 状态管理库 - 状态机

当前状态，收到外部事件，迁移到下一个状态

React 状态管理库 - Modern.js/Reduck

5. 应用级框架科普

硅谷明星创业公司Vercel 的 React开发框架，稳定，开发体验好，支持Unbundled Dev,SWC等，其同样有 Serverless一键部署平台帮助开发者快速完成部署。口号是"Let's Make WebFaster"
字节跳动Web Infra团队研发的全栈开发框架,内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
无API思想的全栈开发框架，开发过程中无需写API调用与 CRUD逻辑，适合前后端紧密结合的小团队项目。

三、实践练习例子：

const countModel = model( 'count' ).define({
state: {
x: 0,
y: 0,
sum: 0,
},
actiohs: {
incrementx(state) {
state.x += 1;
},
incrementY(state) {
state.y += 1;
},
},
});

四、课后个人总结：

在本次响应式系统与React章节中，React实现部分有容易混淆的组件部分，React的状态归属部分有比较难理解的地方；通过本次章节学习，了解到React的总体理念和内容。

响应式系统与React ｜ 青训营笔记