这是我参与【第五届青训营】伴学笔记创作活动的第13天。

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

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

React 的设计与实现 - 响应式编程

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

React 的设计与实现 - 组件化

总结：

1. 组件是 组件的组合/原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部

设计思路 - 组件化

组件设计：

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

2. 组件有 Props/State 两种状态。

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

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

5. 组件接受外部的 Props 状态提供复用性。

6. 根据当前的 State/Props，返回一个 UI。

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

Virtual DOM (虚拟 DOM)

Virtual DOM 是一种用于和真实 DOM 同步，而在 JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和 DOM 可以建立一一对应的关系。
它赋予了 React 声明式的 API:您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。

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

应用级框架科普

1. 硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev， swO等，其同样有 Serverless 一键部署平台帮助开发者快速完成部署。口号是"Let's Make Web Faster“

2. 字节跳动 Web lnfra 团队研发的全栈开发框架,内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。

3. 无 API 思想的全栈开发框架，开发过程中无需写 API 调用与 CRUD 逻辑，适合前后端紧密结合的小团队项目。