01 React简介与特性
1、React 用于构建用户界面（视图）的js库 作用：构建和操作视图
2、React特点： 声明式（只需要关注结果，不需要关注过程；区别用命令式，一步一步告诉怎么做）、组件化（jsx可以使用js的语法编写组件）、跨平台编写（虚拟dom，本质是js对象，只需要不同的渲染器就可以实现一次编写跨平台渲染）（可以使用RN开发原生的移动应用）
3、Thinking In React
快速响应的影响原因：等待资源加载、大部分情况下浏览器单线程执行
等待资源加载解决：懒加载（Lazy）、降级的UI（Suspense）、在出现错误的时候可以渲染降级UI（ErrorBoundary，是一个高阶组件，目前只能在类组件中使用，因为需要用到生命周期）
浏览器线程执行：JS执行（异步更新）、浏览器计算样式布局（时间切片，操作虚拟dom，当所有的都执行完毕之后，变为真实dom）、UI绘制（Fiber，虚拟dom） （16.6ms浏览器刷新一次，js可以操作dom，所以js加载会阻塞浏览器渲染，如果一个js执行时间过长，超过了16.6ms的话，这个时候就没有时间进行样式布局和UI绘制了）（造成的结果：页面太卡了）
4、react更新流程
对于一次更新请求，可能有多个时间切片任务，不是每个新任务完成之后都会把Fiber树交给渲染器，是在整个Fiber树构建好之后再提交 如果每次都更新dom会导致一个问题：会导致更新一半的错觉
渲染器：之前都是虚拟dom树，转化为真实dom，常用的ReactDomRenderer
Fiber树过大导致渲染耗时过长？
- 如果没有很多动画，速度还可以
- 内存靠的是双缓存结果，一个是之前的Fiber树，还有一个正在构建的Fiber树
- 直接替换，然后将正在构建的Fiber树交给渲染器
- 遍历是递归遍历的，有缓存的逻辑，虚拟dom对应的js对象如果层级很深的话
- React的Fiber结构做到了快速响应吗，一定比真实的js快吗？（虚拟dom渲染确实比真实dom慢，看情况）
异步更新，没有办法保证快，但是可以保证不卡
02 React基础温故知新
- webpack
- react-router
- 类组件和函数式组件
- redux，组件通信
- 数据驱动视图，通过state操作视图
- ref保存与视图无直接关系的值
- 多了hook，比如：useState、useRef、useEffect
- 目前比较推荐：函数式组件+hook
- 只能在最顶层使用hook
- 正确的写法：把条件判断写到useEffect里面
- 只能在react函数中调用hook
- 当函数的闭包包住了旧的变量值的时候，就出现了过期闭包的问题
- 右边打印出来的是0，因为出现了过期闭包的问题
- 解决办法：传入第二个参数
03 业务场景案例
拆分组件的粒度怎么确定？
- 拖拽类：样式类拆分成组件
- useMemo和useCallback的区别：useMemo返回的是一个值，useCallback返回的是一个函数
- 解决办法：在button外面包一层div，阻止一下冒泡
- A 蓝色容器
- 按照react树，而非dom树
