一、React简介与特性 （一） React是用于构建用户界面的Javascript库，构建和操作视图。React具有声明式、组件化（把页面拆分成多个组件）、跨平台编写的特点。React哲学（thinking in react）做到快速效应，等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。比如以下的lazy&suspense:
{routes.map((item)=>{
const Component=React.lazy(()=>import(`./${item.key}`));
const RenderComponent=(
<Suspense fallback={"资源加载中..."}>
<Component/>
</Suspense>
);
return (
<Tabs.TabPane key={item.key} title={item.name}>
{RenderComponent}
</Tabs.TabPane>
);
}))
</Tabs>
可以用 errorBoundary(高阶组件)去更新state，使下一次渲染能够现时降级UI。
（二）React哲学的更新流程：
1、Scheduler(调度器)
（1）维护时间切片（类似requestdleCallback）;
（2）与浏览器任务调度；
（3）优先级调度。
2、Reconciler(协调器）
（1）将JSX转化为Fiber;
（2）Fiber树对比（双缓存）；
（3）确定本次更新的Fiber；
2、Render（渲染器）
渲染器用于管理一棵React树，使其根据底层平台进行不同的调用。
（三）用React开发Web应用
1、架构：打包配置：JSX->babel->JS,加载优化和错误降级；
2、路由：React Router向应用中快速地添加视图和数据流，保持页面与URL间的同步;
3、UI：可复用UI->组件->页面，可复用逻辑抽离成hook；
4、状态：多页面多组件共享信息redux&context.
（四）用React开发Web应用的组件
1、数据：通过定义state操作视图mount时获取数据更新state，ref保存与视图无直接关系的值UNmount前清空ref；
2、通信：props父子组件通信，context&redux组件信息共享；
3、UI：数据决定视图，通过ref获取到DOM；
4、性能：函数使用usecallback值或计算使用usememo组件包括memo。
（五）组件
1、class组件：继承+构造函数，this指针，有生命周期和render方法；
2、函数式组件：没有生命周期，借助hook，return JSX。
3、函数式相较于class的优点：首先是代码量骤降，组件干净清爽；没有复杂的生命周期；支持自定义hook，逻辑复用方便。
4、组件和hook的关系：将UI拆分成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件，组件相当于原子；hook贴近组件内部运行的各种概念逻辑，effect、state、context等，因此hook更贴近于电子。
（六）hook规则&原理
1、只能在最顶层使用hook：
react靠hook调用的顺序知道哪个state对应哪个usestate；
2、只能在react函数中调用hook：即在react函数组件中，或自定义hook中调用；自定义hook必须以use开头；hook中的state是完全隔离的。
3、hook过期闭包问题：在JS中，函数运行的上下文是由定义的位置决定的，当函数的闭包包住了旧的变量值时，就出现了过期闭包问题。
