这是我参与「第五届青训营 」笔记创作活动的第5天
历史与应用
1.前端应用开发，如Facebook，Instagram
2.移动原生应用开发，如Instagram，Discord
3.结合Electron，进行桌面应用开发。
历史∶
2010年，Facebook在php中，引入xhp框架，启发了后来的react设计
2011年，Jordan walke创造了faxjs，也就是后来的react原型
分为四部分，seamless client serever rendering，reactive，performant，strural
2012年，Facebook收购Instagram后 ，Jordan walke基于faxjs的经验，创造了react。
2013年，react正式开源，在2013jsconf上Jordan walke介绍了这款全新的框架。
设计思路
- 状态更新，UI不会自动更新，需要手动地调用 DOM进行更新。
2.欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
转换式系统∶给定输入，求解输出。 如编译器，数值计算。
转换式系统≠响应式系统
响应式系统∶坚挺事件，消息驱动。 如监控系统，UI界面。
对react的期望∶
01 状态更新，UI自动更新。
“状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 前端代码组件化，可复用，可封装。
“欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- 状态之间的互相依赖关系，只需声明即可。
“UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
总结
1.组件是 组件的组合/原子组件
2.组件内拥有状态，外部不可见
3.父组件可将状态传入组件内部
组件设计
1.组件声明了状态和UI的映射。
2.组件有Props/State两种状态。
3.“组件”可由其他组件拼装而成。
4.组件内部拥有私有状态State。
5.组件接受外部的Props状态提供复用性。
6.根据当前的State/Props，返回一个UI。
react（hooks）写法与实现
hook使用法则∶ 不要在循环，条件活嵌套函数中调用hook。
Virtual DOM(虚拟 DOM)
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立——对应的关系。
它赋予了React 声明式的 API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动 DOM更新这些在构建应用程序时必要的操作中解放出来。
不同类型的元素替换同类型的dom元素更新同类型的组建元素递归
React状态管理库
核心思想∶将状态抽离到UI外部进行统一管理
状态机∶当前状态，收到外部事件，迁移到下一个状态
应用级框架科普
1.next.js
硅谷明星创业公司 Vercel 的React开发框架，稳定，开发体验好，支持 Unbundled Dev,SWC等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster”
2.modern.js
字节跳动Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
3.Blitz
无 API思想的全栈开发框架，开发过程中无需写API 调用与 CRUD 逻辑，适合前后端紧密结合的小团队项目。
