前端经典面试题合集, React.memo 和 useMemo 的用法是什么,有哪些区别?
前端经典面试题合集, React.memo 和 useMemo 的用法是什么,有哪些区别?
QA
Step 1
Q:: React.memo() 和 useMemo() 的用法是什么，有哪些区别？
A:: React.memo() 是一个高阶组件（HOC），它通过对比前后两次的 props 来决定是否重新渲染组件。只有当 props 发生变化时，组件才会重新渲染。useMemo() 是一个 React Hook，用于优化函数组件中的计算性能。它会在依赖项变化时重新计算 memoized 值，并返回该值。React.memo() 用于优化组件的渲染，而 useMemo() 则用于优化组件内的计算。
Step 2
Q:: 什么是 React.memo()？它的应用场景有哪些？
A:: React.memo() 是一个高阶组件，作用是将一个函数组件包裹起来，使其成为一个只有在传入的 props 发生改变时才会重新渲染的组件。它的应用场景包括：1. 纯函数组件：组件只依赖于 props 和 state，不包含副作用。2. 重渲染成本高的组件：组件渲染消耗资源较多，避免不必要的渲染。
Step 3
Q:: 什么是 useMemo()？它的应用场景有哪些？
A:: useMemo() 是一个 React Hook，用于在函数组件中缓存计算结果，以优化性能。它接受两个参数：一个计算函数和一个依赖项数组，只有当依赖项数组中的某个值发生变化时，计算函数才会重新执行。应用场景包括：1. 复杂计算：计算量大的操作需要缓存结果以避免重复计算。2. 引用相等性：用于避免不必要的重新渲染，确保传递给子组件的引用类型数据（如对象、数组）只有在真正改变时才更新。
Step 4
Q:: 什么时候应该使用 useMemo() 而不是 useCallback()？
A:: useMemo() 和 useCallback() 都用于性能优化，但应用场景不同。useMemo() 用于缓存计算结果，适用于计算量大的操作；useCallback() 用于缓存函数引用，适用于避免子组件不必要的重新渲染。选择哪个要看具体需求：如果是缓存计算结果，用 useMemo()；如果是缓存函数引用，用 useCallback()。