React.js中的纯组件
我们有一个称为shouldComponentUpdate的生命周期方法，该方法默认情况下返回true（布尔值）值。
ShouldComponentUpdate的目的是我们可以自定义实现默认行为，并决定何时应更新或重新呈现组件。
通常，我们使用状态或属性值来确定更新周期。React现在为我们提供了一个PureComponent，可以对状态和道具进行比较以决定更新周期。如果我们使用PureComponent扩展类，则不需要重写shouldComponentUpdate。
React对当前状态和props与新的props和state进行了浅浅的比较，以决定是否继续下一个更新周期。
这有助于提高应用程序的性能。但是，只有在比较每个状态和道具时才应使用PureComponent扩展类。否则，如果不需要所有状态和道具比较，我们可以自己实现shouldCompnentUpdate。
此扩展PureComponent仅适用于基于状态类的组件。对于功能组件，我们可以使用如下所示的纯函数-
无状态组件示例
import { pure } from ‘recompose’;
export default pure ( (props) => {
//自定义代码
return ‘something useful’ ;// your code
})有状态组件示例
import React, {PureComponent} from ‘react’;
export default class Test extends PureComponent{
render(){
return ‘’;
}
}由于PureComponent对状态和props对象进行了浅层比较，因此，如果这些对象包含嵌套的数据结构，则PureComponent的实现的shouldComponentUpdate将返回false。它甚至可以跳过此组件子级的整个子树的更新。
在这种情况下，子元素也应该是Pure。
因此，嵌套数据结构比较不适用于PureComponent。仅当状态和道具是简单对象时，它才起作用。
如果组件在任何时间点针对相同的输入值返回相同的输出，则可以将它们称为纯组件。
如果状态或道具引用了新对象，则PureComponent每次都会重新渲染。
应该不变地修改对象，以使用PureComponent成功进行更新
即使shouldComponentUpdate失败，我们也可以使用forceUpdate手动重新呈现。如果我们在浅层比较中嵌套了对象，请使用imutable.js。
示例
class Test extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
taskList: [
{ title: 'excercise'},
{ title: 'cooking'},
{ title: 'Reacting'},
]
};
}
componentDidMount() {
setInterval(() => {
this.setState((oldState) => {
return { taskList: [...oldState.taskList] }
});
}, 1000);
}
render() {
console.log(“taskList render called”);
return (<div>
{this.state.taskList.map((task, i) => {
return (<Task
key={i}
title={task.title}
/>);
})}
</div>);
}
}
class Task extends React.Component {
render() {
console.log(“task added”);
return (<div>
{this.props.title}
</div>);
}
}
ReactDOM.render(<Test />, document.getElementById('app'));每秒之后，我们已经从componentDidMount手动触发了一个propchange调用，以演示每次如何呈现每个任务。
请检查控制台登录浏览器。
因为Task组件没有扩展PureComponent。React不知道更改了什么，因此每次都会渲染Task。
所以现在只需用下面的行更改Task组件
导出默认类任务扩展了PureComponent=>它解决了Task的多次渲染问题，并在没有添加新任务的情况下防止不必要的渲染。