✨ React v16.6+ 新增 memo 新特性 官方文档
类组件可以通过继承类 PureComponent
或者实现 shouldComponentUpdate
来主动判断组件是否需要重新渲染,以此来提高性能,但是函数组件到目前为止没有类似的功能。
类型声明:
export function memo<Props>(type: React$ElementType,compare?: (oldProps: Props, newProps: Props) => boolean) {// do somethingconst elementType = {$$typeof: REACT_MEMO_TYPE,type,compare: compare === undefined ? null : compare,};// do somethingreturn elementType;}
代码示例:
function MyComponent(props) {/* 使用 props 渲染 */}// 比较函数function areEqual(prevProps, nextProps) {/*如果把 nextProps 传入 render 方法的返回结果与将 prevProps 传入 render 方法的返回结果一致则返回 true,否则返回 false返回 true,复用最近一次渲染返回 false,重新渲染*/}export default React.memo(MyComponent, areEqual);
说明:
React.memo
接收两个参数,一个是组件,一个是(比较)函数props
,第二参数为本次渲染的 props
true
时复用最近一次渲染,否则 false
重新渲染⚠️ 注意: