字节跳动青训营--前端day6

---

前言

仅以此文章记录学习历程。

---

一、React的历史和应用

应用：

• 前端应用开发：Facebook，Instagram，Netfix网页版
• 移动原生应用开发：Instagram，Discord，Oculus
• 结合Electron，进行桌面应用开发

二、React的设计思路

1. ui编程痛点 & 对React的期望

传统UI编程痛点（Html，css，js）：

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

由上衍生对React编程的期望：

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

2. 组件化

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

3.状态归属问题

• 组件声明了状态和 UI 的映射。
• 组件有 Props/State 两种状态
• “组件”可由其他组件拼装而成。

4. 生命周期

UI逻辑树例子（参考）

三、React（hooks）

1.Virtual DOM(虚拟 DOM)：

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

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

2. diff算法

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

四、React状态管理库

这里原理可以参考这篇文章，原理其实和vuex大同小异。Vue拓展_深入浅出Vuex

五、应用级框架科普