大纲：
1.react简介与特性。
2.react基础温故知新。
3.业务场景案例。
4.课程总结与答疑。
一 react简介与特性。 react是用于构建用户界面的JS库（JavaScript）。 什么是React：react是用JS构建快速响应的大型web应用程序的首选方式之一。在Facebook和Instagram上表现优秀。
问题：为什么页面卡顿？
等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的主要原因。
| 等待资源加载 | 浏览器线程执行 |
|-一次请求太多资源？ |JS执行 |
|-网络请求慢？ |浏览器计算样式布局 |
|资源加载失败？ |UI绘制 |
解决方法：
| React.Lazy |异步更新 |
|React.Suspense |时间切片 |
|ErrorBoundary | React Fiber |
React的更新流程：
Scheduler（调度器）
-
- 维护时间切片
-
与浏览器任务调度
-
优先级调度
Reconciler（协调器）
-
将JSX转换为Fiber
-
Fiber树对比（双缓存）
-
确定本次更新的Fibre
Renderer（渲染器）
-
渲染器用于管理一颗React树，使其根据底层平台进行不同的调用。
特点：
1.声明式： 2.组件化： 3.跨平台编写：
优缺点：
快速响应：Fiber
组件化：复用性强
声明式编程
跨平台：只需修改渲染器
二 React基础温故知新 用React开发 Web应用：
（React Web应用）
- 架构：打包配置：JSX->babel->JS 。加载优化和错误降级。
- UI：可复用UI->组件->页面。可复用逻辑抽成hook。
- 路由：React Router向应用中快速地添加视图和数据流，保持页面与URL间的同步。
- 状态：多页面多组件共享信息redux & conext
（React组件）
- 数据：通过定义state操作视图Mount时获取数据更新sate Ref保存与视图无直接关系的值UNMount前清空Ref。
- UI：数据决定视图，通过Ref获取DOM。
- 通信：props父子组件通信，context & redux组件信息共享
- 性能：函数使用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是完全隔离的
hook过期闭包问题：JS中，函数运行的上下文是由定义的位置决定的，当函数的闭包包住了旧的变量值时就出现了过期闭包的 问题。
react常见API及作用：React.Component、React. Pure Component、React.memo、React.createElement、React.cloneElement
React常见Hook及作用：
- useState：返回一个state以及更新state的函数
- useEffect：
- useContext：
- useRef：
- useMemo：
- useCallback：
- useReducer:
- useImperativeHandle：
- useLayoutEffect：
具体场景案例
如何划分组件、父组给子组件通信、组件间共享信息、组件性能优化、组件挂载位置、如何进行逻辑复用
