react-- 常见的组件优化
ShouldComponentUpdate
渲染前会进行比较,如果返回的react元素和之前的想用就不需要render,可以看下面的例子
正常情况下:
import React, { Component } from "react";
export default class ShouldComponentUpdate extends Component {
constructor(props) {
super(props);
this.state = {
comments: [],
};
}
componentDidMount() {
setInterval(() => {
this.setState({
comments: [
{
author: "小明",
body: "这是小明写的文章",
},
{
author: "小红",
body: "这是小红写的文章",
},
],
});
}, 1000);
}
render() {
const { comments } = this.state;
return (
<div>
<h1>CommentList</h1>
{comments.map((item) => {
return <Comment key={item.author} data={item} />;
})}
</div>
);
}
}
class Comment extends Component {
render() {
const { author, body } = this.props.data;
console.log("render");
return (
<div className="border">
<p>作者: {author}</p>
<p>内容: {body}</p>
</div>
);
}
}
可以看到一直在render
使用ShouldComponentUpdate后
import React, { Component } from "react";
export default class ShouldComponentUpdate extends Component {
constructor(props) {
super(props);
this.state = {
comments: [],
};
}
componentDidMount() {
setInterval(() => {
this.setState({
comments: [
{
author: "小明",
body: "这是小明写的文章",
},
{
author: "小红",
body: "这是小红写的文章",
},
],
});
}, 1000);
}
render() {
const { comments } = this.state;
return (
<div>
<h1>CommentList</h1>
{comments.map((item) => {
return <Comment key={item.author} data={item} />;
})}
</div>
);
}
}
class Comment extends Component {
shouldComponentUpdate(nextProps, nextState) {
const { author, body } = nextProps;
const { author: nowAuthor, body: nowBody } = this.props;
if (nowAuthor === author && nowBody === body) {
// 减少reader
return false;
}
return true;
}
render() {
const { author, body } = this.props.data;
console.log("render");
return (
<div className="border">
<p>作者: {author}</p>
<p>内容: {body}</p>
</div>
);
}
}
可以看到只render了2次
PureComponent
import React, { Component, memo, PureComponent } from "react";
export default class MemoPage extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
obj: {
num: -1,
},
};
}
setCounter = () => {
this.setState({
counter: 1,
});
};
render() {
const { counter, obj } = this.state;
return (
<div>
<h1>PureComponentPage</h1>
<button onClick={this.setCounter}>change</button>
<Demo counter={counter} obj={obj} />
</div>
);
}
}
class Demo extends PureComponent {
render() {
const { counter } = this.props;
console.log("render");
return <div>{counter}</div>;
}
}
当点击多次的时候只会执行一次,Component 会执行多次
const Demo = memo(props => { const { counter } = props;
console.log("render");
return <div>{counter}</div>;
});
和PureComponent 一样的效果。
缺点
只会进行浅比较