React.memo
当我们组件内部有大量的计算是,避免组件内部进行不必要的重新渲染,使用React.memo进行缓存组件,避免不必要的重新渲染
React.memo
是用来判断是否需要重新渲染组件,和shouldComponentUpdate
的区别是shouldComponentUpdate
用于class组件方式,而React.memo
用于hooks
方式
语法
React.memo(Component, propsAreEqual)
- Component 需要缓存的组件
- propsAreEqual两个props是否相等、当返回true时,那么组件就会复用,不重新渲染组件
function memo<P extends object>(
Component: FunctionComponent<P>,
propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean
): NamedExoticComponent<P>;
function memo<T extends ComponentType<any>>(
Component: T,
propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean
): MemoExoticComponent<T>;
使用
默认根据props的浅比较进行来判断子组件是否更新
import React, { useState, useRef, useEffect, useMemo } from 'react';
const LiveInfo = (props) => {
return <div>
LiveInfo
</div>
}
export default React.memo(LiveInfo);
传递第二个参数是就根据第一个参数返回值判断
import React, { useState, useRef, useEffect, useMemo } from 'react';
const LiveInfo = (props) => {
return <div>
LiveInfo
</div>
}
export default React.memo(LiveInfo, function propsAreEqual(prevProps, nextProps) {
if (prevProps.visbile !== nextProps.visible) {
return false // 更新
}
return true // 复用,不重新渲染
});
shouldComponentUpdate
是否应该更新组件,true更新、false不更新
shouldComponentUpdate(nextProps, nextState)
使用
export default class PromiseRender extends React.Component {
state = {
component: null,
};
shouldComponentUpdate = (nextProps, nextState) => {
const { component } = this.state;
if (nextState.component !== component) return true; // 更新
return false; // 不更新
};
render() {
const { component: Component } = this.state;
const { ...rest } = this.props;
return Component ? (
<Component {...rest} />
) : (
<div
style={{
width: '100%',
height: '100%',
margin: 'auto',
paddingTop: 50,
textAlign: 'center',
}}
>
</div>
);
}
}
React.PureComponent
改写了
shouldComponentUpdate
,添加上了浅比较
而 PureComponent
也就是改写了 shouldComponentUpdate
,加上了浅比较,React源码:文章来源:https://www.toymoban.com/news/detail-456673.html
if (type.prototype && type.prototype.isPureReactComponent) {
return (
!shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
);
}
shallowEqual 源码:文章来源地址https://www.toymoban.com/news/detail-456673.html
const hasOwn = Object.prototype.hasOwnProperty
function is(x, y) {
if (x === y) {
return x !== 0 || y !== 0 || 1 / x === 1 / y
} else {
return x !== x && y !== y
}
}
export default function shallowEqual(objA, objB) {
if (is(objA, objB)) return true
if (typeof objA !== 'object' || objA === null ||
typeof objB !== 'object' || objB === null) {
return false
}
const keysA = Object.keys(objA)
const keysB = Object.keys(objB)
if (keysA.length !== keysB.length) return false
for (let i = 0; i < keysA.length; i++) {
if (!hasOwn.call(objB, keysA[i]) ||
!is(objA[keysA[i]], objB[keysA[i]])) {
return false
}
}
return true
}
到了这里,关于React.memo、shouldComponentUpdate、PureComponent的基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!