这是我参与「第四届青训营笔记」创作活动的第一天。这篇笔记主要是复习上课所讲的React知识。在课堂上学习的内容如下：React的历史、设计思路、实现、状态管理库与应用级框架。

1.React的历史

2010年，Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。 2011年，Jordan Walke创造了FaxJS,也就是后来的React原型，FaxJS特点如下图:

（我觉得比较重要的两个特点是：只需要写一次代码，就可以在客户端或浏览器渲染；视图会根据状态的改变自动更新。） 2012年，Jordan Walke基于FaxJS的经验，创造了React。 2013年，React正式开源。 2014年至今，各种围绕React的新工具/新框架开始涌现。

2.React的设计思路

2.1 UI编程痛点

• 状态更新，UI不会自动更新，需要手动地去调用DOM进行更新。
• 欠缺基本的代码层面的隔离和封装，代码层面没有组件化。
• UI之间的数据依赖关系，需要手动维护，如果依赖链路过长，则会遇到回调地狱（代码中嵌套了多层回调）。

2.2 React设计思路-响应式编程与组件化

2.2.1响应式系统与转换式

• 转换式系统就是给定输入求解输出，例子：编译器、数值计算。
• 响应式系统就是监听事件，消息驱动，例子：监控系统，UI界面。我的理解：响应式系统就是可以根据状态的变化自动做出反应，比如手机详情界面，如果用户改变手机的型号，页面上显示的手机价格也会随之改变。响应式系统执行流程如下：

graph TD
事件 --> 执行既定的回调-->状态变更

2.2.2响应式编程

前端UI界面执行的流程图如下：

graph TD
事件 --> 执行既定的回调-->状态变更-->UI更新

响应式编程特点：

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

补充内容: 指令式编程----如C语言，需要实现什么功能需要将过程一步一步写出来。 声明式编程---告诉程序应该做什么，而不是怎么做，比如SQL语句。 响应式编程--声明式编程的一种，数据的改变可以引发其自动改变。

2.2.3 组件化

组件化是将一个页面拆分成一个个小的功能模块,每个功能模块完成属于自己这部分独立的功能。

（1）总结

• 组件时组件的组合/原子组件
• 组件内拥有状态，外部不可见
• 父组件可将状态传入组件内部（这可以实现父组件控制子组件）

（2）组件设计

• 组件声明了状态和UI的映射
• 组件有Props/State两种状态
• 组件可由其他组件拼装而成

（3）组件化代码设计

• 组件内部有私有状态State
• 组件接受外部的Props状态提供复用性
• 根据当前的State/Props,返回一个UI

2.2.4 状态归属问题

React是单向数据流，只能父组件给子组件传东西，子组件不能给父组件传东西。子组件可以改变父组件的状态，父组件可以传一个函数给子组件，子组件实行这个函数，引发父组件状态的改变。

如果两个节点都要使用同一个状态（同一个变量），那么这个变量可以放到两个节点向上寻找到最近的祖宗节点。

2.2.5 react生命周期

组件的生命周期可以分为3个阶段：

• Mounting(挂载)：已插入真实 DOM
• Updating(更新)：正在被重新渲染
• Unmounting(卸载)：已移出真实 DOM

3.React的实现

3.1实现存在的问题

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

3.2 实现过程存在问题的解决方案

• JSX的全称是 Javascript and XML，它是一种可以在JS中编写XML的语言。JSX更像一种模板，类似于Vue中的 template。编译时JSX会通过Babel编译成JS。
• 直接操作原始DOM比较消耗性能，使用虚拟DOM可以减少操作真实DOM 的次数。虚拟DOM（Virtual DOM）是一种和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。它赋予了React声明式的API：您告诉React希望UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
• 当状态发生改变的时候，使用Diff算法对比新旧虚拟DOM树，找到发生改变的地方，重新渲染虚拟DOM，渲染过程中只更新改变的地方，之后再将虚拟DOM改变的地方同步到真实DOM。
• 如何使用Diff算法

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

4.React的状态管理库与应用级框架

4.1 React状态管理库

核心思想：将状态抽离到UI外部进行统一管理，用Store来统一管理，实现状态的共享。 React中有很多状态管理库，以下是推荐使用的：redux,xstate,mobx,recoil

4.2 应用级框架推荐

• NEXT.JS轻量级的 React 服务端渲染应用框架。是硅谷明星创业公司Vercel的React开发框架，稳定、开发体验好，支持Unbundled Dev,SWC等，其同样有Serverless一键部署平台帮助开发者快速完成部署。
• MODERN.JS是字节跳动Web Infra团队研发的全栈开发框架，内置很对开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。它可以实现移动端的开发，使用比较方便。
• Blitz：无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密的小团队项目。