历史与应用
历史：
-
2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
-
2011年 Jordan Walke 创造了 FaxJS , 也就是后来的 React 原型。
-
2012年 在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React。
-
2013年 React正式开源，在2013 JSConf上 Jordan Walke介绍了这款全新的框架。
-
2014年-今天 生态大爆发，各种围绕 React 的新工具/新框架开始涌现。
应用：
- 前端应用开发，如 Facebook， Instagram， Netflix网页版。
- 移动原生应用开发，如 Instagram， Discord， Oculus
- 结合 Electron，进行桌面应用开发。
设计思路
UI编程痛点
- 状态更新， UI 不会自动更新，需要手动地调用 DOM 进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell"。
响应式与转换式
响应式编程
-
状态更新，UI自动更新。
“状态更新，UI不会自动更新，需要手动地调用DOM 进行更新。”
-
前端代码组件化，可复用，可封装。
“欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”
-
状态之间的互相依赖关系，只需声明即可。
“UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell".“
组件化
- 组件是组件的组合/原子组合
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题
「当前价格」状态属于谁？
属于： Root 节点
方法：状态归属于两个节点向上寻找到最近的祖宗节点
「当前价格」如何改变？
将 Root节点 的 onChangeValue() 向下传递 （Javascript中，函数是「一等公民」）
思考：
- React 是单向数据流，还是双向数据流？ - 单向，父传子
- 如何解决状态不合理上升的问题？ - 状态管理库
- 组件的状态改变后，如何更新 DOM？ - 在后面实现里介绍
组件设计：
- 组件声明了状态和UI的映射。
- 组件有 Props/State 两种状态。
- 组件”可由其他组件拼装而成。
组件代码会是什么样子？
- 组件内部拥有私有状态 State。
- 组件接受外部的 Props 状态提供复用性。
- 根据当前的 State/Props,返回一个 UI。
生命周期
hooks的写法
react里的useState、useEffect都是hooks，他会挂载到组件的某个生命周期的时间。
注意，不要在循环，条件或嵌套函数中调用Hook，这种会导致状态是否存在不确定的事情是不能干的。
改变状态时，需要使用React给的封装的函数来实现，以告知React状态发送了改变去更新UI。
副作用是指的是组件对外部造成影响，比如发起网络请求、改变文档标题这些的事情，需要在useEffect里写。
实现
了解实现可以更好的对其进行性能优化。
Problems
- JSX 不符合 JS 标准语法 - 对jsx进行转换
-
返回的 JSX 发生改变时，如何更新 DOM - 计算diff，更新新旧DOM差异的部分（通过虚拟DOM）
-
虚拟DOM（Virtual DOM）
Virtual DOM 是一种用于和真实 DOM 同步，而在 JS 内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM 可以建立一一对应的关系。
官方说明：虚拟DOM赋予了 React 声明式的 API，也就是说我们告诉 React 希望让 UI是什么状态，React 就确保 DOM 匹配该状态（自动更新）。这使得开发者可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
-
-
How to Diff?
平衡Diff更新的次数少和Diff计算的速度快的问题
完美的最小 Diff 算法，需要 O（n^3）的复杂度。
实际上，牺牲理论最小Diff，换取时间，得到了O（n）复杂度的算法：Heuristic O(n) Algorithm
* 不同类型的元素：替换
* 同类型的DOM元素：更新
* 同类型的组件元素：递归
- State/Props更新时, 要重新触发 render 函数（组件函数）
状态管理库
核心思想
==将状态抽离到UI外部进行统一管理==
相比于在组件内声明状态，确实更方便了，但是会降低组件的可复用性，组件和外部的数据强耦合了。
所以如果有明确的组件归属，那就不要写到store里面。
推荐的库
状态机
当前状态，收到外部事件，迁移到下一个状态
Modern.js/Reduck
Modern.js：字节开发的全栈开发框架
Reduck：它对应的状态管理库
