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

Lecture6.1 React的历史与应用

应用场景

前端应用开发
移动原生应用开发
结合Electron进行桌面应用开发
3D对象（WebGL）

发展历史

2010，Facebook引入xhp框架，首次引入组合式组件思想，启发了React的设计
2011，Jordan Walke创造FaxJS（React原型）
2012，Facebook收购Instagram，Jordan Walke创造了React
2013，React开源
2014至今，生态大爆发

Lecture6.2 React的设计思路

从UI编程痛点开始

举例：购买手机页面，多个选项均会影响价格，修改JS变量，然后再调api更新UI
原生JS编程的问题：

状态更新，UI不会自动更新，要调DOM
欠缺基本的代码层面封装隔离，没有组件化
UI数据依赖关系需要手动维护

响应式与转换式

转换式系统
- 给定输入求解输出的过程
- 常用于数据计算
响应式系统
- 监听事件（计算成分并不大）
- 适用于UI界面、监控系统
- 事件发生->执行回调->变更状态->更新UI

基于响应式系统的React

解决了三个问题

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

组件化

DOM和实际UI存在一一对应关系
组件的特点：

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

状态归属问题：

一个在很多地方都出现的变量，应该属于需要使用它的组件的最近公共父组件（状态上移，是一种不合理的方案）
一个变量的修改位置和归属位置不同时，通过将更改函数下传的方式实现修改
不是双向过程：因为一次只是单向通讯

组件设计经验：

组件声明状态和UI映射
组件由props（外部传入）/state（内部私有）状态
“组件”可由其它组件拼装而成

组件代码会是什么样子？

内部拥有state
接受外部props
根据当前的state&props返回UI

生命周期

Mounting挂载到DOM上，执行构造函数和render函数
Updating更新，根据新的值重新计算值，再render
Unmounting卸载

Lecture6.3 React（Hooks）的写法与React实现

Hooks的写法

声明状态UseState

const [count, setCount] = useState(0);

函数参数是初始值
返回值有两个，第一个是可供使用的值，第二个是修改函数

触发器UseEffect

useEffect(() => {
  document.title = `You clicked ${count} times`;
})

有两个参数，第一个是一个函数，第二个是一个数组

第二个参数没有的时候，只在组件挂载的时候执行一次
第二个参数叫做依赖项，在修改的时候被执行

Hooks注意事项

不要在循环、条件、嵌套函数中调用Hooks

React的实现

存在的问题

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

问题的解决

转译成JS即可，对应成相应的函数即可
虚拟DOM

关于虚拟DOM

在JS内存维护，与DOM建立一一对应关系（这样就具有了声明式的特性了）。状态改变之后，通过diff算法计算需要更新的节点（组件），重新渲染虚拟DOM，最后再更改DOM。

关于diff算法

通过树状结构判断需要更改的节点，完美算法时间复杂度 $O(n^3)$ ，实际算法略微牺牲（全局最优-->局部最优），时间复杂度 $O(n)$ 。策略：不同类型元素替换，同类型DOM元素更新，同类型组件元素递归。

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

React状态管理库

核心思想

状态放在UI外部进行管理

优缺点

优：避免状态异常提升到根节点及附近节点
缺：减少组件的复用性，依赖于外部就不能复用了

常见的React状态管理库

Redux
xstate
mobx
recoil

状态机

（还记得面向对象学的状态机图吗？）
当前状态，收到外部事件，迁移到下个状态

选择状态管理库的时机

状态是被整个APP拥有还是单个组件拥有？
如果一个状态需要被整个APP使用，那就适合放在store里面

应用级框架科普

next.js

速度快

modern.js

工具多

Blitz

无Api思想

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