北京网站建设 合一竞价 推广
前言
在构建现代 React 应用时，性能优化是一个关键考虑因素。随着组件的复杂性增加，合理管理状态和副作用变得尤为重要。React 提供了多个工具来帮助开发者优化组件性能，其中最常用的包括 useEffect、useCallback、useMemo 和 React.memo。这些 API 各自有着不同的用途和机制，但它们的目标一致：通过有效地缓存和副作用，提升应用的响应速度和用户体验
概述
useEffect：
useEffect(setup, dependencies?)参数
setup是一个函数，称之为副作用函数，在函数内可以放置要执行的操作，同时需要返回一个清理（cleanup）函数
dependencies是一个可选的数组：
- dependencies没有时：组件初始化渲染和更新时，setup函数都会执行
- dependencies是一个空数组时：setup函数只执行一次；
- dependencies中放置依赖项时：在每次依赖项变更重新渲染后，React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值运行 setup 函数。（先清理再重新运行）
返回值
useEffect返回undefined
useCallback：
useCallback(function,dependencies)参数：
function
1、定义：想要缓存的函数
2、特点：
- 可以接受任何参数并返回任何值
- React只会把这个函数返回给你，而不是直接调用！！（由你自己决定何时调用）
- 进行下一次渲染时，dependencies没有变化，则funtion返回相同的函数；若有变化，React将新传入的函数缓存以便后续使用
dependencies
1、定义：有关是否更新function的所有响应值的一个列表
2、特点：
- 响应式值包括 props、state，和所有在你组件内部直接声明的变量和函数。
- 依赖列表必须具有确切数量的项，并且必须像 [dep1, dep2, dep3] 这样编写
- React 使用 Object.is 比较每一个依赖和它的之前的值。
返回值：
在初次渲染时，useCallback 返回你已经传入的 function 函数
在之后的渲染中, 如果依赖没有改变，useCallback 返回上一次渲染中缓存的 function 函数；否则返回这一次渲染传入的 function。
useMemo
const cachedValue = useMemo(calculateValue, dependencies)参数：
calculateValue
1、定义：要缓存计算值的函数
2、特点：
- 没有任何参数，可以返回任意类型
- 首次渲染时调用该函数。之后的渲染中，dependencies不变，React返回相同值；否则，再次调用函数并返回最新结果，并缓存结果供下次使用
dependencies
同useCallback的返回值特点一样
返回值：
在初次渲染时，useMemo 返回不带参数调用 calculateValue 的结果。
在接下来的渲染中，如果依赖项没有发生改变，它将返回上次缓存的值；否则将再次调用 calculateValue，并返回最新结果。
memo
const MemoizedComponent = React.memo(MyComponent);参数
- 接受两个参数：一个组件和一个可选的比较函数。
返回值
- 返回一个新的组件，只有在 props 发生变化时才会重新渲染。
原理
useEffect
该Hook函数身并不缓存任何值或对象，它通过控制副作用的执行时机和频率来优化 React 应用的性能、来用于处理副作用，例如数据获取、订阅和手动操作 DOM。每当依赖项变化时，useEffect 会执行指定的回调函数。
useCallback
useCallback 通过缓存函数的引用，避免在每次渲染时重新创建函数，从而减少不必要的子组件渲染。
useMemo
useMemo 缓存计算的结果，避免每次渲染时重复计算开销大的值。
memo
React.memo不是一个Hook函数，而是一个高阶组件。它对组件的 props 进行浅比较，如果 props 没有变化，则返回先前的渲染结果，避免重新渲染。
扩展：
memo一般可以分别和useMemo、useCallback结合使用，useMemo和useCallback可以控制作为prop传入子组件中的函数或者值不变，此时包装在memo中的组件因传入prop不变而返回先前的渲染结果，避免重复渲染。