react默认情况下，只要父组件的状态改变了，不管子组件是否依赖这个状态，子组件都会重新渲染。
那么如果我们想要实现子组件所依赖的状态没有发生改变，那子组件就不重新渲染，该怎么做呢？
一般情况下我们对class组件做优化，都是在shouldComponentUpdate这个生命周期里面做相应的判断来确认是否需要重新渲染，以达到优化的效果。
import React, { Component } from 'react';
export default class pureList extends Component {
constructor(p){
super(p);
}
shouldComponentUpdate(nextprops) {
if (nextprops.list.title === this.props.list.title) {
return false;
}
return true
}
render() {
return (
<div>
{this.props.list.title}
</div>
)
}
}
后来React为class组件提供了pureComponent来实现这一效果。pureComponent可以自动执行shouldComponentUpdate函数，当组件要更新的时候，会对传入的props和state进行一次浅比较，如果比较出来是一致的，就不进行组件更新。
注意：这里是进行的浅比较，当props是对象的时候，pureComponent没法做判断，会自动认为是不一致的，从而进行比较。所以在使用pureComponent的时候，应避免传入的状态是对象的情况。
import React, { PureComponent } from 'react'
export default class pureList extends PureComponent {
render() {
return (
<div>
{this.props.list.title}
</div>
)
}
}
对于函数式组件，react也提供了react.memo的形式来做优化处理。
import React from 'react';
const MemoList = React.memo(function MemoList(props) {
/* 使用 props 渲染 */
return (<div>{props.list.title}</div>);
});
export default MemoList;
React.memo只检查props的变更，默认情况下，如果传入的是对象的形式，React.memo只做浅比较，如果想要做复杂的比较的话，可以通过第二个参数传入具体的比较规则。
function MyComponent(props) {
/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
/*
如果把 nextProps 传入 render 方法的返回结果与
将 prevProps 传入 render 方法的返回结果一致则返回 true，
否则返回 false
*/
}
export default React.memo(MyComponent, areEqual);
注意：这里的areEqual判断的结果跟class组件的shouldComponentUpdate判断返回的结果是相反的。
