React与响应式 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第12天, 今天老师带领我们了解了Reac

这是我参与「第四届青训营」笔记创作活动的的第12天, 今天老师带领我们了解了React的设计思路和基本实现方式, 以及现代常见的基于React开发的工程化框架.

1. React设计思路

React设计思路 - UI编程的痛点

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

React设计思路 - 响应式与转换式

前端开发中要避免过程式编程, 转向函数式编程, 下面我们看一段响应式系统的流程图:

graph TD
事件 --> 执行既定的回调 --> 状态变更 --> UI更新

React设计思路 - 响应式编程

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

React设计思路 - 组件化

DOM不是JS的变量, DOM本身是浏览器内部维护的状态, 我们只能通过调用JS的DOM-API去修改DOM, 这不代表DOM是JS的变量, 可以去随意的修改它; DOM和UI是一一对应的关系.

总结:

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

React的设计与实现 - 状态归属问题

案例中, 当前价格属于Root节点, 这是一种不合理的状态归属问题.

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

思考:

React是单向数据流, 还是双向数据流?
- 永远是父组件给子组件传东西(函数/变量), 而子组件不能给父组件传东西, 子组件不能改变父组件的状态, 子组件只能通过接受父组件传递过来的函数, 进而改变父组件的状态
如何解决状态不合理上升的问题?
- 状态管理库中实现
组件的状态改变后, 如何更新DOM?

组件设计:

组件声明了状态和UI的映射
组件有Props/State两种状态
- 内部的私有状态State, 外部传递接口的Props状态
"组件"可以由其他组件拼装而成

组件代码会是什么样子?

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

注意 : 上述的实现只是一种想象, 不一定对

React设计思路 - 生命周期

2. React(hooks)的写法

让我们看两段真实的代码:

useState

传入一个初始值, 返回一个状态, 和set该状态的函数, 用户可以通过调用该函数, 来实现状态的修改.

useEffect

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

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

Hook使用法则

不要在循环, 条件或者嵌套中调用Hook

3. React的实现

React的实现 - Problems

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

JSX不符合JS标准语法

解决办法是transpile(转义), 这里请大家理解一下compile和transpile的区别:

compile是编译, transpile是转义:把一个语法的语言转成另外一个语言(例如C++转成JS)

HTML本质上是一个树状结构, 每一个节点可以有自己的属性, 可以表示成JSON数据格式, 因此可以转义

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

真实DOM是浏览器内部维护的状态, 我们只能通过DOM接口去修改DOM, 而不能直接拿到DOM就随便更改

指令式编程(面向过程)
- 一步一步, 手动告诉程序怎么做
声明式编程(面向对象)
- 发出一个指令, 就把事情办完了;
- 现在主流的前端框架都是声明式编程
- 为什么不把声明式编程的方式植入浏览器中?
  - 浏览器作为应用平台, 不能提供更高层次的东西, 这样会把自由度降低
响应式编程
- 是声明式编程的一种, 当一个事物状态改变时, 改变其他事物的状态

Virtual DOM (虚拟DOM)

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

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

React弊病: 当父组件发生状态改变时, 它的所有子节点要全部更新

How to Diff?

完美的最小Diff算法, 需要O(n*3)的复杂度

权衡更新次数少和计算速度快的要求, 实际我们牺牲了理论最小Diff, 换取时间, 得到了O(n)复杂度的算法

即Heuristic O(n) Algorithm(启发式O(n)算法)

State/Props更新时, 要重新触发render函数

4. React状态管理库

React状态管理库 - 核心思想

案例中, 当前价格的状态上升到根节点上, 是不合适的, 进而引入状态管理库.

React与响应式 | 青训营笔记