1 React 特性与简介
- 特点：
-
- 声明式
声明式编程：让开发者只用关注结果，告诉机器我们需要达到什么目的，而不用关注怎么去实现这个过程。
（相对于）命令式编程：告诉机器每一步要做什么。第一步创建DOM容器，第二步获取容器下的内容，第三步计算需要更新的结果，第四步更新需要展示的内容。
-
- 组件化
- 跨平台编写
虚拟dom的本质是js对象，靠渲染器实现跨平台编写。
2 React 哲学
等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
Lazy & Suspense 例子：
ErrorBoundary 例子：
- ErrorBoundary是一个高阶组件，如果一个class中定义了getDerivedStateFromError或者componentDidCatch（生命周期）中的任何一个，就它变成了错误边界。当它的子孙组件内部抛出错误的时候，就会调用
- JS的加载会阻塞浏览器的渲染，如果加载时间超过16.6s的时候，就没有时间进行页面布局和绘制了，这样会导致页面掉帧。用户体验很卡。React解决办法：对于一个重的更新任务，不直接等待它的执行，而是将它拆分成多个新任务，放在浏览器每帧的空闲时间（时间切片）中去执行，就不会阻塞UI，从而获得一个比较流畅的体验。
- React Fiber —— 虚拟DOM
React 更新流程
- Scheduler调度器会把一个重任务拆分成多个新任务，在浏览器空闲时间去执行这些新任务
- Reconciler最重要的部分，当协调器收到调度器任务，就会进行Fiber树对比，生成更新后的Fiber树
- 针对一次浏览器的更新请求，可能会有多个轻任务，不会每个小任务完成都去更新一遍，而是整棵Fiber树更新完成之后再交给Renderer
- 内存中靠超缓存结构，存有两棵Fiber树，通过alternate属性将两棵树的属性关联起来
- 虚拟DOM渲染比真实DOM慢，但是要从用户体验上来看，不卡要优先于速度
优点：
- 快速响应Fiber，
- 组件化：复用性强，
- 声明式编程，
- 跨平台：只需要修改渲染器
缺点：
- 大型应用需要配套学习 状态管理、路由工具
- 不适合小型应用，需要用babel处理
React基础知识：
组件开发：
class组件
- Render方法必须有
函数式组件
Hook规则&原理
只能在最顶层使用Hook
- 右边的代码是错误的写法，第二次渲染的时候if中的逻辑就没有执行了，但是React并没有反应过来，会按照上一次渲染的顺序进行调用，进而会导致报错。如图，会把第二次渲染时的第二个钩子当成第一次渲染时的钩子来进行使用
- 下面是正确写法，把if判断写到hooks里面
只能在React函数中调用Hook
Hook过期闭包问题
常见API及作用
常见Hook及作用
- 前两个很常用
- useMemo和API中的memo有些像
- useReducer中的dispatch，比如可以定义一些set或者增删改查操作，如果定义对象比如复杂的对象，就可以用dispatch
具体场景案例
01 如何划分组件
Layout布局维度
page维度
component维度
具体案例：
（下面的部分因为还没学React，导致很多部分听的迷迷糊糊，等以后学了之后再来进行修改和补充）
父组件给子组件通信案例
子组件给父组件通信案例
- change：（）少了newValue
