React：
React是用于构建用户界面的JavaScript库
特点：
• 声明式：区别于命令式编程
• 组件化：复用性强。把页面拆分为多个组件，这些组件自身用的状态state，和外部传入的属性property
• 跨平台编写：只需使用不同的渲染器
React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。它在FaceBook和Instagram上表现优秀。
（快速响应：Fiber）
等待资源加载和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
等待资源加载：
• 一次请求太多资源：
解决方法：懒加载，React.Lazy
• 网络请求慢：
前端无法改变网速慢的事实，但可以优化加载时的视图，展示一些UI，这样不至于突兀的白屏。 React.Suspense
• 资源加载失败：
断网的情况下，资源加载失败，React提供ErrorBoundary，在出现错误的时候可以渲染降级UI，就可以通过这个降级UI展示错误提示，从而避免出现白屏。
浏览器线程执行：
• JS执行：
每16.6ms浏览器刷新一次，而JS执行和UI绘制是无法同时执行的，即JS的加载会阻塞浏览器的渲染，如果一个JS的执行时间过长，超过了16.6ms，就会没有时间进行样式布局和UI绘制了，从而导致页面掉帧，用户的直观体验就是“页面卡”。
React的解决方法是：对于一个重的更新任务，不直接等待它的执行，而是将它拆分为多个轻任务，放在每帧的空闲时间（即时间切片）去处理，就不会阻塞UI了。
• 浏览器计算样式布局
• UI绘制
React组件开发：
React两种组件的写法：
Class组件：
特点：
• 继承 + 构造函数：
首先，需要继承基类 React.Component，以及还需要在构造函数constructor里调用父类的构造函数（即super(props)）
• this
• 生命周期：
组件的生命周期可分为三个状态：mounting（挂载）【已插入真实DOM】、updating（更新）【正在被重新渲染】、unmounting（卸载）【已移出真实DOM】。
组件挂载的时候需要进行一些操作（图中的componentDidMount()），组件卸载的时候进行的操作（图中的componentWillUnmount()）
• render方法：
作为组件使用时必须写render方法，且需要返回JSX组件
函数式组件（更推荐用）：
• 没有继承、没有构造函数，没有this，也没有生命周期
• 借助Hook
• 没有render函数，直接return JSX
（与Class组件比起来更加简洁，可读性更强）
函数式组件相较于Class等优点：
• 代码量骤减，组件干净清爽
• 没有复杂的生命周期
• 支持自定义hook，逻辑复用方便
组件和hook的关系：
• 我们将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。
• hook贴近组件内部运行的各种概念逻辑，effect、state、context等。hooks更贴切于电子。
Hook规则和原理：
只能在最顶层使用Hook
React怎么知道哪个state对应哪个useState？
React靠的是Hook调用的顺序。
只能在React函数中调用Hook
在React函数组件中 或 自定义Hook中调用
自定义Hook必须以use开头。
Hook中的state是完全隔离的。
具体场景案例：
如何划分组件：
首先，从页面布局上划分：
从页面的角度上来划分：
从组件的维度上拆：
