这是我参与「第五届青训营 」伴学笔记创作活动的第7天，下面跟我一起看看青训营React部分讲了什么吧~
一. React的历史
- 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
- 2011年 Jordan Walke 创造了 FaxJS ，也就是后来的 React 原型。
- 2012年 在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walked 基于 FaxJS 的经验，创造了React。
- 2013年 React 正式开源，在2013 JSConf 上 Jordan Walke 介绍了这款全新的框架
- 2014-今天 生态大爆发，各种围绕 React 的新工具/新框架开始涌现
二.React的设计思路
1.UI编程痛点：
1）状态更新，UI不会更新，需要手动调用DOM进行更新
2）欠缺基本的代码层面的封装和隔离，代码层面没有组件化
3）UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
- React的应对措施——响应式编程
1）状态更新，UI自动更新
2)前端代码组件化,可复用,可封装
3)状态之间的互相依赖关系只需声明即可
三.组件化与组件设计
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
- 组件内部有私有状态 State
- 组件接受外部的 Props 状态提供复用性
- 根据当前的 State/Props，返回一个 UI
- 组件声明了状态和 UI 的映射
- 组件有 Props/State 两种状态
- “组件”可由其他组件拼装而成
四.React实现遇到的问题
- JSX 不符合 JS 标准
- 返回的JSX发生改变时，如何更新 DOM
解决方案：使用Virtual DOM:一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。其赋予React声明式的API
- State/Props 更新时，要重新触发 render 函数
五.How to differ?
- 不同类型的元素：替换
- 同类型的DOM元素：更新
- 同类型的组件元素：递归
六.React状态管理库
- 核心思想：将状态抽离到UI外部进行统一管理
- 常见状态管理库：redux;xstate;mobx;recoil
七.常见应用型框架
- NEXT.JS
硅谷明星公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev，SWC 等，其同样有Serverless 一键部署平台帮助开发者快速完成部署。
- MODERN.JS 现代 Web 工程体系
字节跳动 Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
- Blitz
无 API 思想的全栈开发框架，开发过程中无需写 API 调用与 CRUD 逻辑，适合前后端紧密结合的小团队项目。
