React基础与实践
react特点：声明式、组件化、跨平台编写
等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因
对应解决方案：
React.Lazy
React.Suspense
ErrorBoundary
异步更新
时间切片
React Fiber
React-更新流程
- Scheduler（调度器）
- 维护时间切片（类似requestldleCallback）
- 与浏览器任务调度
- 优先级调度
- Reconciler（协调器）
- 将jsx转化为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
- Renderer（渲染器）
- 用于管理React树
- 使其根据底层平台进行不同的调用
React-更新流程
优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需修改渲染器
缺点
- 不适合小型应用，需要用babel处理
- 大型应用需要配套学习状态管理、路由工具
- 上手成本比较大
用React开发
- 打包配置：JSX -> babel -> JS
组件
class组件
- 继承+构造函数
示例：
函数式组件
- 没有生命周期
- 借助Hook
- return JSX
Hook规则&原理
- 只有在最顶层使用Hook
- 只能在React函数中调用Hook
常见API及作用
组件性能优化
state.name发生变化导致
- 重新渲染Wrapper
- 重新渲染Counter
- 重新计算calcValue
注意
- Count不变的场景下，Counter不能重新渲染
- 没有两个完全相等的函数
- 不变的场景下，不重新计算calcValue
- 一个从portal内部触发的事件会一直冒泡至包含React树的祖先，即便这些元素并不是DOM树中的祖先
