这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
React历史与应用
1、前端应用开发.如Facebook,Instagram,Netflix网页版。
2、移动原生应用开发，如Instagram.Discord,Oculus。
3、结合Electron.进行桌面应用开发。
- 2010年Facebook在其php生态中.引入了xhp框架.首次引入了组合式组件的思想：启发了后来的React的设计。 2011年Jordan Walke创造了FaxJS.
- 2012年在Facebook收购Instagram后.该FaxJS项目在内部得到使用，Jordan Wa1ke基于FaxJS的经验.创造了Reacto
- 2013年React正式开源.在2013 JSConf上Jordan Walke介绍了这款全新的框架
- 2014年-今天生态大爆发.各种围绕React的新江具新框架开始涌现
React的设计思路
UI编程痛点
1、状态更新，U1不会自动更新，需要手动地调用DOM进行更新。 2、欠缺基本的代码层面的封装和隔离，代码层面没有组件化。 3、UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell"。
响应式与转换式
响应式编程
-
状态更新，UI自动更新。
状态更新，U1不会自动更新，需要手动地调用DOM进行更新。
-
前端代码组件化，可复用，可封装。
“欠缺基本的代码层面的封装和隔离，代码层面没有组件化。·3
-
状态之间的互相依赖关系，只需声明即可
“U1之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到
“Callback Hell"。"
组件化总结
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
组件设计
1.组件声明了状态和U1的映射。
2.组件有Props/State两种状态。
3.“组件”可由其他组件拼装而成。
组件化代码是什么样子
1.组件内部拥有私有状态State。
2.组件接受外部的Props状态提供复用性。
3.根据当前的State/Props,返回一个Ul。
React（hooks）的写法
React的实现
React的实现Problems
1、JSX不符合JS标准语法
2、返回的JSX发生改变时如何更新DOM
3、State/Props更新时要重新触发render函数
Virtual DOM(虚拟DOM) Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。它赋予了React声明式的API:您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
| 不同类型的元素 | 同类型的DOM元素 | 同类型的组件元素 |
|---|---|---|
| 替换 | 更新 | 递归 |
应用级框架科普
1、硅谷明星创业公司vercel的React开发框架.稳定，开发体验好，支持Unbund1 ed Dev,swC等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster“ 2、字节跳动Web Infra团队研发的全栈开发框架内置了很多开箱即用的能力与最佳实践.可以减少很多调研选择工具的时间。 3、无AP1思想的全栈开发框架，开发过程中无需写AP1调用与cRUD逻辑，适合前后端紧密结合的 小团队项目。
