首页useMemo和useCallBack

useMemo和useCallBack

时间: 2025-02-13 22:01:47 浏览: 53

### React 中 `useMemo` 和 `useCallback` 的区别与使用场景 #### 一、功能差异 `useMemo` 主要用于缓存计算结果，当依赖项未发生变化时，不会重新执行该计算逻辑。这有助于减少不必要的复杂运算开销[^1]。对于 `useCallback` 而言，则专注于返回一个记忆化的函数实例，在其内部定义的函数仅会在指定依赖发生改变的情况下被更新创建。这样可以防止因频繁传递新函数而导致子组件重渲染的问题[^2]。 #### 二、具体实现方式对比二者虽然都能达到一定的性能优化效果，但在实际应用中的侧重点有所不同： - **`useMemo` 实现** ```javascript const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ``` 上述代码片段展示了如何利用 `useMemo` 来保存由变量 a 和 b 计算得出的结果，只有当这两个输入值变化时才会再次调用 `computeExpensiveValue()` 函数来获取新的输出[^3]。 - **`useCallback` 使用案例** ```javascript const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); ``` 这里通过 `useCallback` 将回调函数进行了封装处理，确保只要依赖列表 `[a,b]` 不变就不会生成新的函数引用地址，从而避免了由于父级传入的新函数引起子组件不必要的刷新行为。 #### 三、适用场合分析 - 当遇到需要对某些耗时较长的操作（比如数组过滤、对象映射等）做懒加载或条件性触发的情况时，推荐采用 `useMemo` 进行优化； - 若发现因为不断向子组件注入不同的事件处理器或其他类型的内联回调而造成过多无意义的 DOM 更新现象，则应该考虑运用 `useCallback` 解决此类问题。

阅读全文