课程内容

1. React 简介与特性
2. React基础温故知新
3. 业务场景案例
4. 课程总结与答疑

React 特性与简介

React 特点

• 声明式
  • data 响应式数据
  • mathods 处理函数
  • 这样做的好处就是按照我们约定好的方式来开发，所有人写出来的代码就像一个人写的
  • state
  • 方法就是类成员
  • 也有特定的组件生命钩子
• 组件化
• 跨平台编写

React 哲学

Reacat 是用JavaScript 构建 快速响应 的 大型 Web 应用程序的首选方式之一。在Facebook 和 Instagram 上的表现优秀

等待资源加载时间 和 大部分情况下浏览器单线程执行 是影响web性能的两大主要原因

• 等待资源加载
  • 一次请求太多？
    • React.lazy()
  • 网络请求慢？
    • React.Suspense()
  • 资源加载失败？
    • ErrorBoundary
• 浏览器线程执行
  • Js执行
    • 异步更新
  • 浏览器计算样式布局 （阻塞）
    • 时间切片
  • UI 绘制
    • React Fiber

更新流程

Scheduler (调度器)

• 维护时间切片
• 与浏览器任务调度
• 优先级调度

Reconciler (协调器)

• 将 JSX 转化为 Fiber
• Fiber 树对比（双缓存）
• 确定本次更新的Fiber

Renderer (渲染器)

• 渲染用于管理一颗 React 树
• 使其根据底层平台进行不同的调用

总结

优点

• 快速响应：Fiber
• 组件化：复用性强
• 声明式编程
• 跨平台：只需修改渲染器

缺点

• 大型应用需要配套学习 状态管理、路由工具
• 不适合小型应用，需要用babel 处理

React 基础温故知新

用 React 开发 Web 应用

组件

• 数据

• 通过定义 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 更贴切于电子

Hook规则 & 原理

• 只能在最顶层使用Hook
  • React依靠Hook调用的顺序
• 只能在React函数中调用Hook
  • 在 React 函数组件中 或自定义 Hook 中调用
  • 自定义 Hook 必须以 use 开头
  • Hook 中的 state 是完全隔离的

React 常见 API 及作用

React.Component	类组件基类 extends
React.PureComponent	未实现 shouldComponentUpdate()，内置了props 和 state 浅层对比
React.memo	高阶组件，仅比较 props 变更
React.createElement	创建并返回 React 元素，不使用 JSX 场景
React.cloneElement	克隆并返回新 React 元素，并且可以为新元素添加额外 props
React.Children.[Fn]	map遍历并返回;forEach仅遍历; count子组件数量;only是否只有一个子节点
React.createRef	创建一个 ref，并附加到具体元素上，class 组件中获取 dom 结构常用
React.forwardRef	转发 ref 或者 与 useImperativeHandler 联合使用暴露方法
React.lazy	实现组件动态加载
React.Suspense	组件加载过程优雅降级

React 常见 Hook 及作用

useState	返回一个 state 及 更新 state 的函数
useEffect	可以让你在函数组件中执行某些操作，挂载时、依赖变化时甚至说卸载前。
useContext	接收最近的上层context 对象，并返回其值，一般与 createContex 一起使用
useRef	返回一个可变的 ref 对象，在组件生命周期内持续存在。
useMemo	参数为计算函数和依赖项，只有在依赖项变化时才调用计算函数。返回函数的计算值
useCallback	useCallback(fn,deps),相当于 useMemo(0)=>fn,deps)，一般返回的是一个新函数。
useReducer	useState 的更丰富替代方案，返回[state, dispatch],这里 state 可以是复杂对象，dispatch可以更新这个复杂对象。
useImperativeHandle	可以给父组件暴露方法。一般与 forwardRef 一起使用
useLayoutEffect	useEffect 的执行时机是浏览器完成渲染之后，而 useLayoutEffect 的执行时机是浏览器把内容真正渲染到界面之前，和 componentDidMount 等价。

具体场景案例

如何划分组件

Layout

• Navbar
• Main Content
• Footer
• Floating Button

Page

• Banner
• CardGroup
• Slider Group
• Help Docs
• Footer Banner

Component

• BlockHeader
  • tag
  • title
• SlideButton
  • onClick（Direction，index）
  • ReactNode
  • Boolean
• AnimationWrapper
  • String
  • Number
• BlockWrapper
  • backgroundType
  • boolean
  • “dark”| "light"
• SizeText
  • 通过className 控制
  • 封装成组件
  • 安装主题包

学习资料及工具

React 新版教程
React 官网教程
React 技术揭秘
一文吃透 react-hooks 原理
Arco Design