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

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

React的历史与应用

应用

前端应用开发

如Facebook、Instagram、Netflix网页版
移动原生应用开发

如Instagram、Discord、Oculus
结合Electron，进行桌面应用开发

历史

2010年-Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
2011年-Jordan Walke创造了FaxJS，也就是后来的React原型：
- Seamless Client Server Renderig
  - Write once, render anywhere - client or server.
- Reactive
  - Views are automatically updated on state changes - no bindings necessary.
- Performant
  - Fast rendering using string concatenation, small code size.
- Structural
  - High level components, functionally defined, declarative views.
2012年-在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS发经验创造了React。
2013年-React正式开源，在2013 JSConf上Jordan Walke介绍了这款全新的框架：
- React - A JavaScript library for building user interfaces.
2014年-今天-生态大爆发，各种围绕React的新工具/新框架开始涌现。

React的设计思路

UI编程痛点

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

响应式

响应式与转换式：

转换式系统：给定输入求解输出：编译器、数值计算。
响应式系统：监听事件，消息驱动：监控系统、UI界面。

响应式编程：

状态更新，UI自动更新。
前端代码组件化，可复用，可封装。
状态之间的相互依赖关系，只需声明即可。

组件化

组件：

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

组件设计：

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

组件代码：

组件内部拥有私有状态State
组件接受外部的Props状态提供复用性
根据当前的State/Props，返回一个UI

生命周期：

生命周期.png

React的实现

Problems

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

Virtual DOM（虚拟DOM）

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

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

How to Diff？

完美的最小Diff算法，需要O(n^3)的复杂度。

牺牲理论最小Diff，换取时间，得到了O(n)复杂度的算法：Heuristic O(n) Algorithm。

元素	方法
不同类型的元素	替换
同类型的DOM元素	更新
同类型的组件元素	递归

React状态管理库

核心思想：将状态抽离到UI外部进行统一管理。

推荐：redux、xstate、mobx、recoil。

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

实战：Modern.js/Reduck

应用级框架科普

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

react|青训营笔记