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

响应式系统与React

设计思路

UI编程痛点

原生Javascript写UI

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

响应式与转换式

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

前端UI

graph TD
B(事件) -->C(执行既定的回调) -->D(状态更新) -->E(UI更新)

响应式编程

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

组件化

1. 组件是组件的组合/原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部
4. 状态归属于两个节点向上寻找到最近的祖宗节点。

组件设计

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

生命周期

Mounting挂载 Updating状态改变 Unmounting卸载

hooks的写法

声明状态用到useState() 传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。

 const [x, setX] = useState(0);
    return (
    <div>
        <button onClick={() => setX(x + 1)}>
            x + 1
        </button>
    </div>
    )

useEffect() 传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。

有“副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其他的一些事情，比如网络请求，更新DOM，localStorage存储数据等。

hook使用法则：不要在循环、判断函数中调用。

实现

Diff 更新次数少<------------>计算速度快 TradeOff

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

不同类型的元素 替换

同类型的DOM元素 更新

同类型的组件元素 递归

状态管理库

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

状态机

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

Modern.js/Reduck

现代Web工程体系