ps有点烦，这节课有点回声
react简介与特性
用于构建用户界面的JavaScript库
特点：声明式，组件化，跨平台编写
react是用JavaScript构建快速相应的大型web应用程序的首选方式之一。它在facebook和instagram表现优秀。
等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
等待资源加载
- 一次请求太多资源
- 网络请求慢
- 资源加载失败
浏览器线程执行
- JS执行
- 浏览器计算样式布局
- UI绘制
更新流程
- Scheduler（调度器）
- 维护时间切片
- 与浏览器任务调度
- 优先级调度
- Reconciler（协调器）
- 将JSX转化为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
- Renderer（渲染器）
- 渲染器用于管理一棵React树
- 使其根据底层平台进行不同的调用
虚拟dom生成真实dom 双缓存结构 用后来的fiber树直接替代原本的树，递归遍历 虚拟dom渲染比真实的要慢，但是不卡就行了。没有必要很快但是不卡
优点：
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需修改渲染器
缺点：
- 大型应用需要配套学习 状态管理、路由工具
- 不适合小型应用，需要用babel处理
用react开发web应用
架构：
打包配置：JSX->babel->JS加载优化和错误降级
路由：
ReactRouter向应用中快速地添加视图和数据流，保持页面与URL间的同步。
UI：
可复用UI->组件->页面。
可服用逻辑抽离成hook。
状态：
多页面多组件共享信息
redux&context
数据：
通过定义state操作视图Mount时获取数据更新stateRef保存与视图无智科关系的值unMount前清空Ref
通信：
props 父子组件爱你通信
context&tedux组件信息共享
UI：
数据决定视图
通过Ref获取到DOM
性能：
函数使用useCallback值或者计算使用useMemo组件包裹memo
class组件
- 继承+构造函数
- this
- 生命周期
- render方法
函数式组件
上手成本高
组件和hook
hook让我们更关注组件
下面略
