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

React的历史与应用

一 React历史

二 React应用

React的设计思路

一 UI编程痛点

用原生JS写UI的痛点：

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

二 响应式与转换式

1 响应式系统

前端UI

响应式编程特点：

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

2 组件化

• 组件是组件的组合/原子组件
• 组件内拥有状态，外部不可见
• 父组件可将状态传入组件内部（子组件不能给父组件传数据）

状态归属于两个节点向上寻找到最近的祖宗节点

状态归属问题

React是单向数据流（父组件给子组件传递数据）

3 组件设计

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

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

组件代码会不会是这样的呢？

React生命周期

React(hooks)的写法与React实现

一 React(hooks)写法

二 Recat实现

问题1：

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

How to Diff

完美的最小Diff算法，需要O（n^3）的复杂度。 牺牲理论最小Diff，换取时间，得到了O（n）负责度的算法。

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

一 React状态管理库

1 核心思想

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

2 状态机

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

二 应用级框架科普