React是用于构建用户界面（也可以理解成视图）的JavaScript库
React三大特点：
| 声明式 | 组件化 | 跨平台编写 |
|---|---|---|
| 开发者能更注重于结果，不需要过多关注效果的实现过程。区别于命令式编程，能够简化编程过程 | 将页面拆分成多个组件，每个组件拥有自己的状态，外部也可以为组件传入属性，再将这些组件进行组合使用，从而形成复杂UI | 只需要不同的渲染器即可实现学习 |
React是用JavaScript构建的快速响应的大型Web应用程序的首选方式之一，在Facebook和Instagram上都有优秀的表现。
影响Web性能的两大主要原因分别是：
- 等待资源加载时间；
- 大部分情况下浏览器单线程执行
在资源加载出现问题时，可通过懒加载等方式处理问题。
浏览器线程执行出现问题时，可以将一个任务拆分成多个任务，放在每帧的空闲时间执行，与UI的绘制间隔开，从而实现用户使用体验的提高
用react开发web应用
| 架构 | 路由 | UI | 状态 |
|---|---|---|---|
| 打包配置：JSX->babel->JS加载优化和错误降级 | React Router向应用中快速地添加视图和数据流，保持页面与URL之间的同步 | 可复用UI->组件->页面，可复用逻辑抽离成hook | 多页面多组件共享信息redux & context |
用React开发web应用组件
| 数据 | 通信 | UI | 性能 |
|---|---|---|---|
| 通过定义state操作视图Mount时获取数据更新state Ref保存与视图无直接关系的值unMount前清空Ref | props父子组件通信，context&redux组件信息共享 | 数据决定视图，通过Ref获取到DOM | 函数使用useCalllback值或者计算使用useMemo组件包裹memo |
组件
函数式组件相较于类组件的优点：
- 代码量骤减
- 没有复杂的生命周期
- 支持自定义hook，逻辑复用方便
组件和hook的关系： 我们将UI拆分成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。 hook贴近组件内部运行的各种概念逻辑，effect、state、context等。hook更贴切于电子。
