React历史与应用
React应用：
- 前端应用开发，如Facebook、Instagram、Netflix网页版
- 移动原生应用开发，如Instagram、Discord、Oculus
- 结合Electron，进行桌面应用开发
React历史：
- 2010年，FB在其php生态中引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React设计
- 2011年，Jordan Walke创造了FaxJS，也就是后来的React原型
- 2012年，在FB收购ins后，该FaxJS项目在内部得到应用，Jordan Walke基于FaxJS的经验，创造了React
- 2013年，React正式开源，在2013年JSConf上Jordan Walke介绍了这款全新的框架
- 2014至今，生态大爆发，各种围绕React的新工具新框架开始涌现
React的设计思路
UI编程痛点（eg苹果手机购买页面）：
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到callback hell
响应式与转换式
转换式系统：
- 给定“输入”求解“输出”
- 编译器
- 数值计算
响应式系统：
- 监听事件，消息驱动
- 事件->执行既定的回调->状态变更
- 监控系统
- UI界面
- 事件->执行既定的回调->状态变更->UI更新
！转换式系统不等于响应式系统！！！
响应式编程（针对上文UI编程痛点）
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
组件化小总结
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
思考
- React是单向数据流还是双向数据流？
- 如何解决状态不合理上升的问题？
- 组件的状态改变后，如何更新DOM？
组件设计
- 组件声明了状态和UI的映射
- 组件有props/state两种状态
- 组件可由其它组件拼装而成
组件代码会是什么样子？
- 组件内部拥有私有状态state
- 组件接受外部的props状态提供复用性
- 根据当前的state/props，返回一个UI
React（hooks）的写法
- 改变状态不能直接count状态，而是要手动控制setCount的状态
- “复作用”，不会对组件外部造成任何影响
React的实现
问题：
- JSX不符合JS标准语法
- 返回的JSX发生变化时，如何更新DOM
- Virtual DOM
- Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和DOM可以建立一一对应的关系。
- 它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
- Virtual DOM
- State/Props更新时，要重新触发render函数
React状态管理库
核心思想：将状态抽离到UI外部进行统一管理
- redux
- xstate
- mobx
- recoil
状态机：当前状态，收到外部事件，迁移到下一个状态
应用级框架科普
NEXT.JS
硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持Unbundled Dev, SWC 等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是"Let's Make Web Faster”
MODERN.JS
字节跳动Web Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
Blitz
无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目。
个人总结时间：
老师讲的很清晰很好！从苹果网页的组件倒推中明白了框架的构造和组成，逻辑清晰有条理，即使是新手小白，听过这一节课也有了更深的认识。
