这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

历史与应用

应用

• 前端应用开发
• 移动原生应用开发
• 桌面应用开发
• 三维、游戏场景等

历史

• 2010年，Facebook在其php生态中，引入了xhp框架，首次引入组合式组件的思想，启发了后来的React设计
• 2011年，Jordan Walke创造了FaxJS，即React的原型
• 2012年，Jordan Walke创造了React
• 2013年，React正式开源（JSConf大会）
• 2014-，React生态大爆发

设计思路

UI编程的痛点

• UI不会随着状态的更新而更新，需要手动调用DOM进行更新
• JS缺少代码层面的封装和隔离
• 需要手动维护UI之间的数据依赖关系，若依赖链路太长，容易陷入“Callback Hell”

响应式与转换式

• 转换式：给定输入与求解输出，如编译器、数值计算
• 响应式：监听事件，消息驱动，如监控系统、UI界面

响应式编程

• 过程：事件发生 -> 执行固定回调函数 -> 状态变更 -> UI更新
• 解决痛点
  • UI随状态更新自动更新
  • 前端代码组件化，可复用，可封装
  • 状态之间的依赖关系，只需声明

组件化

• 组件可以组合成父组件且父组件可以将状态传入子组件
• 子组件内的状态对外是不可见的
• 注意：当两个组件需要共享一个状态时，该状态需要上移到它们共同的最近的祖宗节点

组件设计：组件声明了状态和UI的映射。组件有Props和State两种状态，state是组件内部私有的状态，props是组件接收外部指令的状态，组件根据当前的state和props返回UI

生命周期

实现

JSX语法：转译

虚拟DOM

用于和真是DOM同步，在JS内存中维护的和真实DOM一一对应的对象

它赋予了React声明式的API，帮助我们从属性操作、事件处理和手动更新DOM等操作中解放出来

Diff的原则：不同类型->替换；同类型DOM -> 更新；同类型组件 -> 递归

状态管理库

• 核心思想：将状态抽离到UI外部进行统一管理
• 缺点：降低复用性，一个组件与外部状态的强耦合性一般只出现在业务中，不会出现在组件库里
• 相关库：redux, xstate, mobx, recoil

应用级框架

• Next.js，硅谷明星创业公司Vercel的React开发框架
• Modern.js，字节Web Infra团队研发的全栈开发框架
• Blitz，无API思想的全栈开发框架，适合前后端紧密结合的小团队项目