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

React 与响应式系统

React 的设计思路

UI 编程痛点

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

响应式与转换式

响应式系统

注重：监听事件，消息驱动

比如：监控系统、UI 界面

转换式系统

注重：给定【输入】求解【输出】

比如：编译器、数值计算

响应式系统

事件 —> 执行既定回调 —> 状态变更

前端 UI

事件 —> 执行既定回调 —> 状态变更 —> UI 更新

响应式编程 状态更新，UI 自动更新。

前端代码组件化，可复用，可封装

状态之间的互相依赖关系，只需声明即可。

组件化 – 总结

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

思考：

Reacy 是单向数据流，还是双向数据流。？

单向数据流，数据只能由父组件传至子组件，子组件可通过父组件传递的函数更改该数据。

如何解决状态不合理上升的问题？

组件的状态改变后，如何更新 DOM？

React 的实现

组件设计

组件声明了状态和 UI 的映射。

组件根据当前 State/Props 与 UI 的映射更改 UI。

组件具有 Props/State 两种状态。

组件内部拥有私有状态 State。

组件接收外部的 Props 状态提供复用性。

“组件”可由其他组件拼装而成。

React （hooks）的写法

useState()

import { useState } from 'react';

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

useEffect()

什么是副作用？ 一个操作会更改组件外部的状态，该操作即是副作用。

import { useEffect } from 'react';

useEffect(() => {
    // 组件挂载/更新时，执行的副作用操作

    return () => {
        // 组件卸载时执行的副作用操作/清除订阅
    }
})

注：不要在循环、条件或嵌套函数中调用 Hook。

React 的实现

如何解决 JSX 不符合 JS 的标准的问题？

将 JSX 转译为 JS

返回的 JSX 发生改变时，如何更新 DOM ？

JSX 的改变会引起 Virtual DOM 的改变，对改变前后的 Virtual DOM 进行 Diff（How to Diff?），根据 Virtual DOM 与 DOM 的映射关系，进而更新 DOM

react 组件的 render 函数，在哪些情况下，会被重新执行？

当组件的状态（Props/State）发生改变时，组件和其所有的子组件，会递归地重新执行 render 函数。

Virtual DOM（虚拟 DOM）

注：DOM 由浏览器维护，可通过 DOM API 进行修改。

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

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

指令式编程 声明式编程 响应式编程（声明式的一个类别）

How to Diff?

render 函数执行速度（即 diff 速度）要足够快 <-- TradeOff --> DOM 更新的次数/节点足够少（即 diff 节点足够少）

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

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

不同类型的元素 – 替换

同类型的 DOM 元素 – 更新

同类型的组件元素 – 递归

而组件根节点的类型发生变化时，会引起组件所有子节点递归地发生变化，这是很消耗性能的，如何解决这种问题？

当根节点为不同类型的元素时，React 会拆卸原有的树并且建立起新的树，不再进行递归 diff。