React简介与特性
用于构建用户界面的JavaScript库，构建和操作视图
特点：
- 声明式：声明式编程是告诉机器想要什么信息，机器就返回什么信息，偏重结果。
- 组件化：组件化是指复杂系统时将多个功能模块拆分、重组的过程。
- 跨平台编写：从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力
React哲学
React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一
等待资源加载时间和大部分情况下浏览器单线程执行时影响web性能的两大主要原因
| 等待资源加载 | 浏览器线程执行 |
|---|---|
| React.Lazy | 异步更新 |
| React.Suspense | 时间切片 |
| ErrorBoundary | React Fiber |
更新流程
Scheduler 调度器：维护时间片，与浏览器任务调度，优先级调度
Reconciler 协调器：将JSX转化为Fiber Riber树对比（双缓存） 确定本次更新的Fiber
Renderer 渲染器：渲染器用于管理一棵React树，使其根据底层平台进行不同的调用
优点：
- -快速响应Fiber
- -组件化：复用性强
- -声明式编程
- -跨平台：只需修改渲染器
缺点： 还要学习状态管理，路由工具 不适合小型应用，需要用babel处理
React基础知识
1.用React开发web应用
架构: -打包配置：JSX -> babel -> JS -加载优化和错误降级 路由：React Router 向应用中快速地添加视图和数据流，保持页面与URL间的同步 状态： -多页面多组件共享信息 -redux&context UI： -可复用UI -> 组件 -> 页面 -可复用逻辑抽离成hook
2.组件开发
定义：应用程序中根据UI结构划分的不同共能的代码的集合 分类： 基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件 业务组件：由基础组件组合成的业务抽象化UI。例如公司部门信息的下拉框 区块组件：由基础组件组件和业务组件组合成的UI块 页面组件：展示给用户的最终页面，一般就是对应一个路由规则
数据： 通过定义state操作视图 Mount时获取数据更新state Ref保存与视图无直接关系的值 unMount前清空Ref 通信： props 父子组件通信 context & redux 组件信息共享 性能： 函数使用 useCallback 值或者计算使用useMemo 组件包装memo UI: 数据决定视图 通过Ref获取到DOM
3.Class组件
继承 + 构造函数 this 生命周期 render方法
4.函数式组件：
没有生命周期 借助Hook return JSX
5.Hook规则&原理
只能在最顶层使用Hook 只能在React函数中调用Hook 在React函数组件中或自定义Hook中调用 自定义Hook必须以use开头 Hook中的state是完全隔离的
总结
函数式组件注意事项： 1.组件名称须以大写字母开头 2.必须有返回值 1.class组件注意事项：类名必须以大写字母开头 2.extends是一个关键字，用来实现类之间的继承。类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性。 3.类组件必须提供 render 方法，render 方法必须有返回值，表示该组件的 UI 结构。render会在组件创建时执行一次
