这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
1.React的历史与应用
React应用场景
- 前端应用开发，如Netflix网页版，Facebook，Instagram
- 移动原生应用开发，如 Instagram,Discord
- 结合Electron，进行桌面应用开发
React的历史
2010年 Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
2011年 Jordan Walke创造了FaxJS,也就是后来的React原型。
2012年 在Facebook收购Instagram后，该FaxJS项目在内部得到使用，JordanWake基于FaxJS的经验，创造了React。
2013年 React正式开源，在2013 JSConf上Jordan Walke介绍了这款全新的框架。
2014-今天 生态大爆发，各种围绕React的新工具/新框架开始涌现。
2.React的设计思路
UI编程痛点
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell"
转换式系统与响应式系统
前端不需要很多计算输入输出，而是需要监控事件，并做事件响应。
事件——执行既定回调——状态变更——UI更新
响应式编程预期效果
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的相互依赖关系，只需要声明就可以
组件化总结
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
状态可能会不合理上升 将onChangeValue()向下传递（Javascript中，函数是一等公民）
React的思考
- React是单向数据流，还是双向数据流？(单向数据流）
- 如何解决状态不合理上升的问题？
- 组件的状态改变后，如何更新DOM?
组件设计
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态
- “组件”可由其他组件组装而成
3.React（hooks）的写法
使用封装好的函数进行刷新，比如setCount（count+1）、useState（）、useEffect
useState：传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。
useEffect：传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。
有“副作用“的函数，要传入useEffect来执行。
副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM,localStorage存储数据等。
不要在循环函数或者嵌套函数中调用hook
4.React的实现
- JSX不符合JS标准语法；
- 返回的JSX发生改变时，如何更新DOM；
Virtual DOM：Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立——对应的关系。
真实的DOM是浏览器内部的一个结构
声明式编程与指令式编程
How to diff？
5.React状态管理库
针对状态不合理上升问题，将状态抽离到UI外部进行统一管理
Next.js
硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Dev,SWC等，其同样有 Serverless一键部署平台帮助开发者快速完成部署。口号是“Let's Make WebFaster"
Modern.js
字节跳动 Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
Blitz
无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目。
