这是我参与「第四届青训营 」笔记创作活动的的第15天。
响应式系统与React
一、React 历史与应用
历史
⭐ 2010年 Facebook 在其 php 生态中，引入了 xhp 框架,首次引入了组合式组件的思想，启发了后来的 React 的设计。
⭐ 2011年 Jordan Walke 创造了 FaxJS，也就是后来的 React 原型:
⭐ 2012年 在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造了 React。
⭐ 2013年 React 正式开源，在2013 JSConf 上J ordan Walke 介绍了这款全新的框架:
⭐ 2014年 · 今天 生态大爆发，各种围绕 React 的新工具 / 新框架开始涌现。
应用
- 前端应用开发，如 Facebook，Instagram，Netflix 网页版。
- 移动原生应用开发，如 Instagram，Discord，Oculus。
- 结合 Electron 进行桌面应用开发。
二、React 的设计思路
UI 编程痛点
- 状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到 "callback Hell"。
响应式编程
- 状态更新，UI 自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
组件化
含义
⭐ 组件是组件的组合/原子组件
⭐ 组件内拥有状态，外部不可见
⭐ 父组件可将状态传入组件内部
组件设计
⭐ 组件声明了状态和UI的映射。
⭐ 组件有 Props/State 两种状态。
⭐ “组件”可由其他组件拼装而成。
组件代码
⭐ 组件内部拥有私有状态 State。
⭐ 组件接受外部的 Props 状态提供复用性。
⭐ 根据当前的 State/Props，返回一个 UI。
生命周期
三、React（hooks）的写法
useState
⭐ 传入一个初始值，返回一个状态，和 set 该状态的函数，用户可以通过调用该函数，来实现状态的修改。
useEffect
⭐ 传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。
有"副作用"的函数，要传入 useEffect 来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM, localStorage 存储数据等。
Hook使用法则
⭐ 不要在循环，条件或嵌套函数中调用Hook。
四、React 的实现
Problem1 —— JSX 不符合 JS 标准语法
Problem2 —— 返回的 JSX 发生改变时，如何返回更新 DOM
virtual DOM（虚拟DOM）
⭐ Virtual DOM 是一种用于和真实 DOM 同步，而在 JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和 DOM 可以建立一一对应的关系。
它赋予了 React 声明式的API：您告诉 React 希望让UI是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。
Problem3 —— How to Diff ？
⭐ 完美的最小 Diff 算法，需要O（N^3）的复杂度。
⭐ 牺牲理论最小 Diff，换取时间，得到了O（N）复杂度的算法：Heuristic O(n) Algorithm。
五、React 状态管理库
核心思想
⭐ 将状态抽离到 UI 外部进行统一管理
推荐
状态机
⭐ 当前状态，收到外部事件，迁移到下一个状态
六、应用级框架科普
NEXT.JS
⭐ 硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev，SWC 等，其同样有 Serverless 一键部署平台帮助开发者快速完成部署。口号是 "Let's Make Web Faster"。
MODERN.JS
⭐ 字节跳动 Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践可以减少很多调研选择工具的时间。
Blitz
⭐ 无API思想的全栈开发框架，开发过程中无需写 API 调用与 CRUD 逻辑，适合前后端紧密结合的小团队项目。
