今天学习的是 React 基础与实践，以下是课程结构。
- React 简介与特性
- React 基础温故知新
- 业务场景案例
- 课程总结与答疑
React 简介与特性
React 是用于构建用户界面的 Javascript 库。
React 的特点：
- 声明式
- 组件化
- 跨平台编写
React 是用 Javascript构建快速响应的大型 web 应用程序的首选方式之一，它在 Facebook 和 Instgram 上表现优秀。
等待资源加载时间和大部分情况下浏览器单线程执行是影响 web 性能的两大主要原因。
等待资源加载
- 一次请求太多资源
- 网络请求慢
- 资源加载失败
- React.Lazy
- React.Suspense
- ErrorBoundary
浏览器线程执行
- JS 执行
- 浏览器计算样式布局
- UI 绘制
- 异步更新
- 时间切片
- React Fiber
React 更新流程
- Scheduler 调度器
- 维护时间切片
- 与浏览器任务调度
- 优先级调度
- Reconciler 协调器
- 将 JSX 转化为 Fiber
- Fiber 树对比（双缓存）
- 确定本次更新的 Fiber
- Renderer 渲染器
- 渲染器用于管理一棵 React 树，使其根据底层平台进行不同的调用
总结
- 优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需要修改渲染器
- 缺点
- 大型应用需要配套学学习（状态管理、路由工具）
- 不适合小型应用，需要用 babel 处理
React 基础温故知新
用 React 开发 web 应用
- 架构：打包配置，JSX、babel、JS 加载优化和错误降级
- 路由：React Router 向应用中快速的添加视图和数据流，保持页面与 URL 间的同步
- UI：可复用 UI、组建、页面，可复用逻辑抽离成 hook。
- 状态：多页面多组件共享信息 redux & context
用 React 开发 web 应用_组件
- 数据：通过定义 state 操作视图 Mount 时获取数据更新 state，Ref 保存与视图无直接关系的值 unMount 前清空 Ref
- 通信：props 父子组件通信，context & redux 组件信息共享
- UI：数据决定视图，通过 Ref 获取 DOM
- 性能：函数使用 useCallback，值或者计算使用 useMemo，组件包裹 memo
组件
Class 组件：
- 继承+构造函数
- this
- 生命周期
- render 方法
函数式组件：
- 没有生命周期
- 借助 hook
- return JSX
函数式相较于 Class 的优点：
- 代码量骤减，组件干净清爽
- 没有复杂的生命周期
- 支持自定义hook，逻辑复用复杂
组件和 hook 的关系：
- 我们将 UI 拆分成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件，组件相当于原子
- hook 贴近组件内部运行的各种概念逻辑，effect、state、context 等，hook 更接近于电子
hook 规则 & 原理
- 只能在最顶层使用 hook（React 通过 hook 调用的顺序，知道哪个 state 对应 哪个 useState）
- 只能在 React 函数中调用 hook，在 React 函数组件中，或自定义 hook 中调用，自定义 hook 必须以 use 开头，hook 中 state 是完全隔离的
