memo 只能是函数组件可以使用的,类组件(class)是用不了的
所有的函数组件都是可以包裹一个memo函数的 这个函数就像类组件的PureComponent的效果是一样的
memo 阻止多次调用的问题
import React, { memo, PureComponent } from "react";
// 所有的函数组件都是可以包裹一个memo函数的 这个函数就像类组件的PureComponent的效果是一样的
const MemoHeader = memo(function Header() {
console.log("Header render被调用了");
return (
<div>
<h1>Header</h1>
</div>
);
});
class Main extends PureComponent {
constructor(props) {
super(props);
this.state = {
counter: 0,
};
}
render() {
console.log("Main render被调用了");
return (
<div>
<h1>Main</h1>
</div>
);
}
}
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
counter: 0,
};
}
render() {
console.log("App render被调用了");
const { counter } = this.state;
return (
<div>
<h1>当前计数:{counter}</h1>
<button onClick={() => this.addClick()}> + 1</button>
<MemoHeader />
<Main />
</div>
);
}
addClick() {
this.setState({
counter: this.state.counter + 1,
});
}
}
PureComponent是专门针对 类组件的,memo是专门针对函数组件的,这两个的作用:主要是防止多次渲染
