本节课程面向对于 React 知识有一定了解的同学，稍微深层次的介绍了下 React 的特性和更新流程。对于最近比较火的 Hook 也有了对比和介绍。
React特性与简介
React特点
- 声明式：让开发者只需要关注结果，告诉机器我们需要达到什么目的，区别于命令式
- 组件化：把页面拆分成多个组件，这些组件自身拥有状态，外部也可以传入一些属性，再将这些组件组合使用构成复杂的UI
- 跨平台编写：靠渲染器实现
React哲学（Thinking In React）
React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。它在Facebook和Instagram上表现优秀。
等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
等待资源加载问题
- 一次请求太多资源？
- 网络请求慢？
- 资源加载失败？
解决办法
- React.Lazy：实现动态加载
- React.Suspense：单个文件加载过慢时，优化加载时的视图，给用户提供降级的UI给用户提示，不会造成突兀的白屏
- ErrorBoundary：在出现错误时渲染降级UI
浏览器线程执行问题
- JS执行
- 浏览器计算样式布局
- UI绘制
解决办法
- 异步更新
- 时间切片
- React Fiber
React更新流程
Scheduler（调度器）
- 维护时间切片（类似requestldleCallback）
- 与浏览器任务调度
- 优先级调度
Reconciler（协调器）
- 将JSX转化为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
Renderer（渲染器）
渲染器用于管理一颗React树，使其根据底层平台进行不同的调用。
总结
优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需修改渲染器
缺点
- 大型应用需要配套学习状态管理、路由工具
- 不适合小型应用，需要用babel处理
React基础温故知新
由React开发web应用
- 架构： 打包配置：JSX——>babel——>JS。加载优化和错误降级。
- 路由： React Router向应用中快速地添加视图和数据流，保持页面与URL间的同步。
- UI： 可复用UI——>组件——>页面。可复用逻辑抽离成hook。
- 状态： 多页面多组件共享信息 redux&context
组件
- 数据： 通过定义state操作视图，Mount时获取数据更新state。Ref保存与视图无直接关系的值，unMount前清空Ref
- UI： 数据决定视图，通过Ref获取到DOM
- 通信： props父子组件通信；context&redux组件信息共享
- 性能： 函数使用useCallback值或者计算使用useMemo组件包裹memo
组件
Class组件
- 继承+构造函数
- this
- 生命周期
- render方法
函数式组件
- 没有生命周期
- 借助Hook
- return JSX
函数式相较于Class的优点
- 代码量骤减，组件干净清爽
- 没有复杂的生命周期
- 支持自定义hook，逻辑复用方便
组件和Hook的关系
- 我们将UI拆成多个独立单元，这些独立单元可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。
- hook贴近组件内部运行的各种概念逻辑，effect、state、context等。hooks更贴切于电子。
Reactlogo像个原子：
Hook规则&原理
只能在最顶层使用Hook
React怎么知道哪个state对应哪个useState？
答案是React靠的是Hook调用的程序
只能在React函数中调用Hook
- 在React函数组件中或自定义Hook中调用
- 自定义Hook必须以use开头
- Hook中的state是完全隔离的
React常见API及作用
React常见Hook及作用
具体场景案例
如何划分组件？
Layout
- Navbar
- Main Content
- Footer
- Floating Button
Page
- Banner
- CardGroup
- Slider Group
- Help Docs
- Footer Banner
Component
BlockHeader
- tag
- title
BlockWrapper
- backgroundType
- animate?:boolean;
- theme?:"dark"|"light"
SlideButton
- onClick(direction,index)
- icon?:ReactNode
- animate?:boolean
AnimationWrapper
- animationName?:string
- animationDuration?:number
SizeText
- 通过className控制
- 封装成组件
- 安装主题包
课程总结
- React优化资源加载&快速响应
- 表现优化：ErrorBoundary，Suspense，Lazy
- React更新流程Scheduler&Reconciler&Renderer
- 函数式组件和Class组件
- Hook规则，为什么要保证顺序？
- 在项目中如何拆分组件粒度
- 父子组件通信：cloneElement,forwardRef
- 组件信息共享：useContext,useReducer VS Redux
- 性能优化：useCallback,useMemo,momo
- 你不知道的冒泡：Portal
- 自定义useRequest实现逻辑复用
学习资料及工具
- React新版教程：Quick Start – React
- React官网教程：快速入门 – React
- React技术揭秘：React技术揭秘 (iamkasong.com)
- 一文吃透react-hooks原理：「react进阶」一文吃透react-hooks原理 - 掘金 (juejin.cn)
- Arco Design：Arco Design - 企业级产品的完整设计和开发解决方案
