React性能优化之减少组件渲染次数

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判断返回的结果是相反的。