01 React简介与特性
React的特点
- 声明式
- 组件化
- 跨平台编写
React哲学
React是用JavaScript构建快速响应的大型Web应用的首选方式之一。它在Facebook和Instagram上表现优秀
等待资源加载和大部分情况下浏览器单线程执行是影响web性能的两大主要原因
- 等待资源加载
- 一次请求太多资源
- 网络请求慢
- 资源加载失败
解决方案：
- React.Lazy
- React.Suspense
- ErrorBoundary
- 浏览器线程执行
- Js执行
- 浏览器计算样式布局
- UI绘制
解决方案：
- 异步更新
- 时间切片
- React Fiber
更新流程
- Scheduler（调度器）
- 维护时间切片
- 与浏览器任务调度
- 优先级调度
- Reconciler（协调器）
- 将JSX转换成Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
- Renderer（渲染器）
- 渲染器用于管理一棵React树
- 使其根据底层平台进行不同的调度
优缺点
- 优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需修改渲染器
- 缺点
- 大型应用需要配套学习：状态管理、路由工具
- 不适合小型应用，需要用babel处理
02 React基础温故知新
用React开发Web应用
- 架构
打包配置：JSX -> babel -> JS，加载优化和错误降级
- 路由
React Router向应用中快速地添加视图和数据流，保持页面与URL间的同步
- UI
可复用UI -> 组件 -> 页面，可复用逻辑抽离成hook
- 状态
多页面多组件共享信息，redux & context
组件
- 数据
通过定义state操作视图，Mount时获取数据更新state，Ref保存与视图无直接关系的值，unMount前清空Ref
- 通信
props父子组件通信，context & redux组件信息共享
- UI
数据决定视图，通过Ref获取到DOM
- 性能
函数使用useCallback值或者计算使用useMemo，组件包裹memo
03 业务场景案例
如何划分组件
Layout
- Navbar
- Main Context
- Footer
- Floating Button
page
- Banner
- CardGroup
- SliderGroup
- HelpDocs
- FooterBanner
总结
React作为目前开发大型应用的主流框架，必须学习。虽然之前没什么学习React的经历，但是整节课停下来，感觉和Vue也挺像的，所以我觉得学习React的话，利用学习Vue的思维，稍加转换，即可。
