认识React ｜ 青训营笔记

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

认识React

FaxJS（React原型） => React

FaxJS几个特点：

1. Seamless Client Server Rendering：客户端 + 服务端渲染
2. Reactive：状态变化触发UI更新
3. Performant：精细处理性能优化
4. Structural：组件复用封装、函数式声明、JS中声明组件

2013年React正式开源

原生编程痛点

1. 手动调用DOM更新。状态更新时UI不会自动更新，需要手动调用DOM进行更新
2. 欠缺封装隔离。代码层面无组件，基本的代码欠缺封装和隔离
3. UI之间的数据依赖需要手动维护。若链路过长会遇到回调地狱

React特性

响应式编程

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

组件化

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

设计

1. 组件声明了状态和UI映射
2. 组件有Props/State两种状态
3. 组件可由其他组件拼装而成

生命周期

Hooks

1. useState
2. useEffect(副作用，修改外部系统)

实现

1. jsx语法转换
2. 虚拟DOM => diff

状态组件库

将状态抽离UI组件外部（store）进行管理

概念

Store：保存数据的地方，你可以把它看成一个容器，整个应用只能有一个 Store。

State：Store 对象包含所有数据，如果想得到某个时点的数据，就要对 Store 生成快照，这种时点的数据集合，就叫做 State。

Action：State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action Creator：View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦，所以我们定义一个函数来生成 Action，这个函数就叫 Action Creator。

Reducer：Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

dispatch：是 View 发出 Action 的唯一方法。

总结

由于时间原因没有对Hooks做详细的介绍有点可惜。但是从React由何需求/痛点而来进一步介绍React整体的架构的思路非常好，使得我对React理解更进一步。