React 提供了两种方式来声明组件，一种是函数式，一种是类式，就是用es6 class, 我们所有的组件都继承自React.Component，函数式很简单，就像我们平常写函数一个，接受一个参数作为输入，然后进行相应的输出，只不过它输出的是jsx。如果一个组件只根据props渲染页面，没有内部的state，我们完全可以用函数组件的形式来实现。
,
在react中，为了将功能进行更好区分，通常将组件分为容器组件和展示组件：容器组件负责数据获取，展示组件负责根据props显示信息。这样进行区分以后，提高了复用性和可用性，项目更易于测试。
例如，我们需要展示一个列表，为此，需要新建组件List（无特别说明的情况下，本文的组件都是写在src文件夹目录下的components文件夹下面，然后在index.js中引入并使用该组件），那么该组件就是一个容器组件，展示的列表中的每一项都是统一格式，所以可以新建一个展示组件Comment，用来显示数据项：
import React, { Component} from "react";
function Comment({data}){
return (
<div>
<p>{data.body} ----- {data.author}</p>
</div>
)
}
export default class CommentList extends Component {
constructor(props) {
super(props);
this.state = {
comments: [
{ body: "react is very good", author: "facebook" },
{ body: "vue is very good", author: "youyuxi" }
]
};
}
render() {
return (
<div>
{this.state.comments.map((c, i) => (
<Comment key={i} data={c} />
))}
</div>
);
}
}
在上面的例子中，我们的数据是直接定义的，在实际的运用过程中，数据通常是动态获取的，但是有的时候，两次获取的数据是相同的，这个时候，我们希望节省开销，不再重新渲染DOM，但是在上面的例子，虽然DOM不会重新渲染，但是组件会重新render，这样依旧会产生新的开销。此时，我们可以借助生命周期函数shouldComponentUpdate来实现，既然是生命周期函数，就不能使用函数组件了，因此，需要对上面的组件进行下面这样的操作：
import React, { Component} from "react";
class Comment extends Component {
shouldComponentUpdate(nextProps) {
if (
nextProps.data.body === this.props.data.body &&
nextProps.data.author === this.props.data.author
) {
return false;
}
return true;
}
render() {
console.log("render");
return (
<div>
<p>{this.props.data.body}------{this.props.data.author}</p>
</div>
);
}
}
export default class CommentList extends Component {
constructor(props) {
super(props);
this.state = {
comments: []
};
}
componentDidMount() {
setInterval(() => {
this.setState({
comments: [
{ body: "react is very good", author: "facebook" },
{ body: "vue is very good", author: "youyuxi" }
]
});
}, 1000);
}
render() {
return (
<div>
{this.state.comments.map((c, i) => (
<Comment key={i} data={c} />
))}
</div>
);
}
}
通过当前值和上一次值得比较，来决定shouldComponentUpdate的返回值：使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出，默认返回ture，返回false时不会重写render，而且该方法并不会在初始化渲染或当使用forceUpdate()时被调用。
在上面的例子中，最后我们通过shouldComponentUpdate减少了不必要的render，节省了部分开销，但是，每次都要写比较判断语句，无疑增加了代码量，在react中，有一个更好的组件能解决当前的问题：PureComponent，这个组件和Component 几乎完全相同，但 PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。所谓的浅比较，意思就是如果对象包含复杂的数据结构，它可能会因深层的数据不一致而产生错误的否定判断(表现为对象深层的数据已改变视图却没有更新），这里，我们继续修改上面的代码：
修改前：
修改后：
修改以后，代码量的确减少了很多，但是，并没有实现我们的目的：
因为数据结构复杂，产生了错误判断，所以，还需要借助es6的语法，进行数据解套：
import React, { Component,PureComponent} from "react";
class Comment extends PureComponent {
render() {
console.log("render");
return (
<div>
<p>{this.props.body}------{this.props.author}</p>
</div>
);
}
}
export default class CommentList extends Component {
constructor(props) {
super(props);
this.state = {
comments: []
};
}
componentDidMount() {
setInterval(() => {
this.setState({
comments: [
{ body: "react is very good", author: "facebook" },
{ body: "vue is very good", author: "youyuxi" }
]
});
}, 1000);
}
render() {
return (
<div>
{this.state.comments.map((c, i) => (
<Comment key={i} {...c} />
))}
</div>
);
}
}
这里，可以适当的总结一下PureComponent的使用原则：
1，数据是值类型；
2，如果数据是引用类型，需确保地址不变，同时不应当有深层次数据变化。
3，组件必须是class形式，不能是函数组件
在React v16.6.0之后的版本，可以使用一个新功能React.memo来完美实现React组件，让函数式的组件，也有了PureComponent的功能。因为PureComponent能有效的减少不必要的render，但是不能使用函数式组件，React.memo就能解决这个问题了，继续修改上面的代码：
import React, { Component} from "react";
const Comment = React.memo(({ body, author }) => {
console.log("render");
return (
<div>
<p>{body}------{author}</p>
</div>
);
});
export default class CommentList extends Component {
constructor(props) {
super(props);
this.state = {
comments: []
};
}
componentDidMount() {
setInterval(() => {
this.setState({
comments: [
{ body: "react is very good", author: "facebook" },
{ body: "vue is very good", author: "youyuxi" }
]
});
}, 1000);
}
render() {
return (
<div>
{this.state.comments.map((c, i) => (
<Comment key={i} {...c} />
))}
</div>
);
}
}
代码下载：点这里
原文：https://www.cnblogs.com/yuyujuan/p/10360226.html