React简介与特性
特点：声明式、组件化、跨平台编写
React是用JS构建快速响应的大型Web应用程序的首选方式之一。
等待资源加载时间和大部分情况下浏览器单线程执行时影响WEB性能的两大主要原因。
浏览器线程执行：JS执行 浏览器计算样式布局 UI绘制（异步更新、时间切片、React Fiber）
更新流程
- Scheduler调度器：维护时间切片、与浏览器任务调度
- Reconciler协调器：将JSK转化为Fiber
- Renderer渲染器：用于管理一颗React树，使其根据底层平台进行不同的调用。
优缺点总结
优点
- 快速响应：fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需要修改渲染器
缺点：大型应用需要配套学习状态管理，路由工作；不适合小型应用，需要babel处理。
用React开发web应用
- 架构：打包配置，加载优化和错误降级
- 路由：ReactRouter向应用中快速地添加视图和数据流，保持页面与URL间的同步
- UI：可复用，可复用逻辑抽离成hook
- 状态：多页面组件共享信息
React组件
- 数据：通过定义state操作视图
- 通信：props父子组件通信；context&redux组件信息共享
- UI数据决定视图
- 性能：函数使用useCallback；值或者计算使用useMemo；组件包裹memo
hook规则& 原理
- 只能在最顶层使用hook
React怎么知道那个state对应哪个useState？
答：React靠的是Hook调用的顺序。
- 只能在React函数中调用hook。自定义hook必须以use开头；Hook中的state是完全隔离的。
常见的hook及其作用
业务场景案例
如何划分组件
- Layout Navbar---- Main Content Footer Footer Floating BUtton
- Page ----- Banner CardGroup Slider Group Help Docs Footer Banner
- Component-----BlockHeader BlockWapper SliderButton SizeText AnimationWrapper
父组件给子组件通信
知道子组件的表现，直接通过props传递即可。
传递信息通过callback
组件间共享信息
组件挂载位置
通过createPortal改变了组件真实的渲染位置， 一个从portal内部触发的事件会一直冒泡至包含React树的祖先，即便这些元素并不是DOM树中的祖先。
如何进行逻辑复用
实现一个useRequest
