这是我参与「第四届青训营」笔记创作活动的的第5天

React

React的历史和应用

主要领域

• 前端应用开发，主要为网页版
• 移动原生应用开发
• 结合electron，进行桌面应用开发

开发历史：

• 2010年Facebook在其php生态中，映入xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计
• 11年jordan walke创造了FaxJS，也就是React的前身
• 12年在Facebook收购Instagram后，FaxJS得以被发扬光大
• 14年至今，各种围绕React的新工具开始涌现

React的设计思路

主要目的是解决UI编程的痛点

• 状态更新，UI不会自动更新，需要手动调用DOM进行更新
• 欠缺代码层面的封装和隔离，代码层面没有组件化
• UI之间的数据依赖关系需要维护，如果依赖链过长会导致“callback hell”

前端UI： 事件->执行既定回调->状态变更->UI更新

想要的响应式编程

• 状态更新，UI自动更新
• 前端代码组件化，可重用可封装
• 状态之间的相互依赖关系只需要说明

总结

• 组件是组件的组合/原子部件
• 组件内拥有状态且外部不可见
• 父组件可将状态传入组件内部

状态归属于两个节点，则向上寻找到最近的祖宗节点 ，父组件将函数自顶而下传递，被改变时可以改变父组件状态

React为单向数据流，只能父组件给子组件传数据，通过传递函数来改变父组件状态

组件设计

• 组件声明了状态和UI的衍射

• 组件有Props/State两种状态

• 组件可由其它组件拼装而成

• 组件内部拥有私有状态State

• 组件接受外部的Props状态提供复用性

• 根据当前的State/props返回一个UI

转化式系统VS响应式系统

• 输入->输出:编译器，数值计算
• 监听事件，消息驱动：监控系统，UI界面

React的写法

HOOK，挂载函数的一种，不能在循环，条件或嵌套中调用HOOK

React的实现

问题

• JSX不符合JS标准语法
• 返回的JSX发生改变时，如何更新DOM
• State/Props更新时，要重新触发render函数

使用React语法

VirtualDOM，和真是DOM同步，在JS内存中维护的一个对象，具有和DOM类似的结构并且可以建立一一对应的关系。

Diff，权衡更新次数少VS计算速度快 复杂度理论最小为O（n^3）,更多的为O（n）

• 不同类型的元素 替换
• 同类型DOM元素 更新
• 同类型组件元素 递归

React的状态管理库

核心思想：将状态抽离到UI外部进行统一管理

状态机：收到外部事件，迁移到下一个状态

应用级框架科普

• NEXTJS 硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Dev，SWC等，有一键部署平台帮助开发者快速完成步数
• MODERNJS 字节Web Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可减少很多调研，选择工具的时间
• Blitz 无API思想的全栈开发框架，过程中无需API调用和CRUD逻辑，适合前后端逻辑紧密的小项目