memo 和usememo的区别，还有使用场景分别是什么
Thu Jul 11 2024
tye25
memo 和 useMemo 是 React 中用于优化性能的两个不同的工具，它们有不同的用途和使用场景。让我们详细比较一下：
- React.memo
React.memo 是一个高阶组件（HOC），用于包装函数组件。
原理：
- 对组件的 props 进行浅比较。
- 如果 props 没有变化，React 将跳过渲染该组件，直接复用最近一次渲染的结果。
使用场景：
- 当组件经常接收相同的 props，渲染结果不变时。
- 用于纯展示型组件，这些组件依赖于 props 并且不依赖于状态或上下文。
- 在大型应用中，当父组件频繁重渲染，但子组件的 props 很少改变时。
示例：
constMyComponent=React.memo(functionMyComponent(props){/* 渲染内容 */});- useMemo
useMemo 是一个 Hook，用于缓存计算结果。
原理：
- 只有当依赖项改变时，才重新计算缓存的值。
- 用于优化计算成本高的操作。
使用场景：
- 当需要进行昂贵的计算，并且这些计算依赖于特定的状态或 props 时。
- 用于创建引用类型的值（对象、数组、函数），以避免不必要的重渲染。
- 在复杂的数据处理或过滤操作中。
示例：
const memoizedValue =useMemo(()=>computeExpensiveValue(a, b),[a, b]);主要区别：
- 作用对象：
- memo 作用于整个组件
- useMemo 作用于组件内部的特定值
- 使用方式：
- memo 是一个高阶组件，包裹整个组件
- useMemo 是一个 Hook，在组件内部使用
- 优化目标：
- memo 优化组件渲染
- useMemo 优化值的计算
- 比较机制：
- memo 比较 props
- useMemo 比较依赖数组
使用建议：
- 不要过度优化。只在性能问题明显时使用这些工具。
- 对于 memo，确保组件真的是纯组件，不依赖于上下文或状态。
- 对于 useMemo，确保被记忆的计算确实是昂贵的，或者是为了保持引用一致性。
- 使用 React DevTools 分析组件的重渲染情况，以确定是否需要优化。