1.1 React的历史与使用
使用场景：
- 前端应用开发，如Facebook，Instagram，Netfix网页版。
- 移动原生应用开发，如Instagram，Discord，Oculus。
- 综合Electron，进行桌面应用开发
- React-three-fiber，是three.js的React渲染器，可以使用React语法用于3D场景
历史：
2010年 Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
2011年 Jordan Walke创造了FaxJS，也就是后来的React原型：
-
Seamless Client Server Rendering
- Write once, render anywhere - client or server
-
Reactive
- Views are automatically updated on state changes - no bindings necessary
-
Performant
- Fast rendering using string concatenation, small code size
-
Structural
- High level components, functionally defined, declarative views
2012年 在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React。
2013年 React正式开源，在2013 JSConf上Jordan Walke介绍了这款新的框架
2014年 - 至今 生态大爆发，各种围绕React的新工具/新框架开始涌现：
- React Native
- Redux
- GraphQL
- Relay
- ......
1.2 React的设计思路
-
UI编程痛点
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Calback Hell”。
-
响应式与转化式
响应式是指网页能够根据不同屏幕设备合适地展现网页效果的方式或手段，而转换式是指将一种格式的数据转换成另一种格式的数据的方式或手段。
-
响应式系统：
-
事件 ➡️ 执行既定的回调 ➡️ 状态变更 ➡️ UI更新
-
对React的功能期望：
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
-
React组件化：
- 组件是组件的组合/原子组件。
- 组件内拥有状态，外部不可见。
- 父组件可将状态传入组件内部。
-
React状态归属问题
-
状态归属于两个节点向上寻找到最近的祖宗节点
-
一些思考
-
React是单向数据流，还是双向数据流？
单向数据流
-
如何解决状态不合理上升的问题？
-
组件的状态改变后，如何更新DOM？
-
-
React组件设计
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态
- “组件”可由其他组件拼装而成
-
React生命周期设计思路
-
-
