使用 React.memo
React.memo
是 React 16.6 新的一个 API,用来缓存组件的渲染,避免不必要的更新,其实也是一个高阶组件,与 PureComponent
十分类似,但不同的是, React.memo
只能用于函数组件 。
基本用法
import { memo } from 'react';
function Button(props) {
// Component code
}
export default memo(Button);
高级用法
默认情况下其只会对 props 做浅层对比,遇到层级比较深的复杂对象时,表示力不从心了。对于特定的业务场景,可能需要类似 shouldComponentUpdate
这样的 API,这时通过 memo
的第二个参数来实现:
function arePropsEqual(prevProps, nextProps) {
// your code
return prevProps === nextProps;
}
export default memo(Button, arePropsEqual);
“注意:与
shouldComponentUpdate
不同的是,arePropsEqual
返回true
时,不会触发 render,如果返回false
,则会。而shouldComponentUpdate
刚好与其相反。