这是我参与「第四届青训营」笔记创作活动的的第11天
本堂课重点内容
-
React 的设计思路
-
React 的实现
详细知识点介绍
React 历史与应用
历史：
-
2010年：Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
-
2011年：Jordan Walke 创造了 FaxJS ，也就是后来的 React 原型
-
2013年：React 正式开源，在2013 JSConf 上 Jordan Walke 介绍了这款全新的框架
-
2014年—今天：生态大爆发，各种围绕 React 的新工具/新框架开始涌现
应用：
-
前端应用开发
-
移动原生应用开发
-
结合 Electron，进行桌面应用开发
React 的设计思路
UI 编程痛点
-
状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新
-
欠缺基本的代码层面的封装和隔离,代码层面没有组件化
-
UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
响应式与转换式
| 解释 | 例子 | |
|---|---|---|
| 转换式系统 | 给定「输入」求解「输出」 | 编译器、数值计算 |
| 响应式系统 | 监听事件、消息驱动 | 监控系统、UI 界面 |
响应式系统：
事件 -> 执行既定的回调 -> 状态变更
前端 UI:
事件 -> 执行既定的回调 -> 状态变更 -> UI 更新
解决思路：
-
状态更新，UI 自动更新
-
前端代码组件化，可复用，可封装
-
状态之间的互相依赖关系，只需声明即可
总结：
-
组件是 组件的组合/原子组件
-
组件内拥有状态，外部不可见
-
父组件可将状态传入组件内部
状态归属问题
-
状态归属于两个节点向上寻找到最近的祖宗节点
-
将 onChangeValue() 向下传递
组件设计
-
组件声明了状态和 UI 的映射
-
组件有 Props/State 两种状态
-
“组件”可由其他组件拼装而成
组件化：
-
组件内部拥有私有状态 State
-
组件接受外部的 Props 状态提供复用性
-
根据当前的 State/Props，返回一个 UI
React 的实现
Problems
-
JSX 不符合 JS 标准语法
-
返回的 JSX 发送改变时，如何更新 DOM
-
State/Props 更新时，要重新触发 render 函数
Virtual DOM（虚拟 DOM）
Virtuat DOM 是一种用于和真实 DOM 同步,而在 JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构,并和 DOM 可以建立一一对应的关系
它赋予了 React 声明式的 API：您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动DOM 更新这些在构建应用程序时必要的操作中解放出来。
How to Diff？
完美的最小 Diff 算法，需要O(n^3)的复杂度。 牺牲理论最小 Diff，换取时间，得到了O(n) 复杂度的算法： Heuristic O(n) Algorithm
| 不同类型的元素 | 替换 |
| 同类型的 DOM 元素 | 更新 |
| 同类型的组件元素 | 递归 |
React 状态管理库
核心思想：将状态抽离到 UI 外部进行统一管理
推荐
-
redux
-
xstate
-
mobx
-
recoil
状态机
当前状态，收到外部事件，迁移到下一个状态
课后个人总结
学习 React 要花费一些时间，因为如果你要在项目上使用 React，你必须学会一套技术栈，包括基础知识，运行编译环境，以及一系列的插件。但是其优势是 JSX 语法和组件化。组件化可以有效地封装页面通用元素，从而增强网页的可重用性。
引用参考
第四届字节跳动青训营「响应式系统与 React」课程
