React面试题: useCallBack()与React.memo的区别与使用常见场景

发布时间 2023-11-02 17:07:34作者: 两仪院水月

React.usecallback与React.memo的区别:

React.useCallback 和 React.memo 是两种不同的优化方式:

主要功能: 它们都可以避免不必要的渲染,提高 React 应用的性能。

React.useCallback 是 Hoc(高阶组件)的解决方案,可以用于优化函数组件和 Class 组件,注意这里适用于React 高阶组件的渲染解决方案,不能用于纯组件。

它接收一个回调函数和依赖项数组作为参数,如果回调函数的依赖项未发生改变,就不会重新渲染。

React.memo 是 React.memo 的缩写,是高阶组件,只能用于函数组件,只能用于是只能用于!。它可以避免渲染不必要的组件。如果组件的 props 和 state 没有发生变化,则不会触发渲染。

这点类似于React.PureComponent, 所以经常被拿出来出题

这两种方法的不同之处在于:划重点:

useCallback 是在 Hoc 中使用的,而 React.memo 是在 React 组件(函数组件)中使用的。

另外,useCallback 适用于 Class 和 Function 组件(React.PureComponent也一样做得到),而 React.memo 仅仅适用于 Function 组件。

总之,useCallback 和 React.memo 都可以帮助我们避免不必要的渲染,提高 React 应用的性能。