首先，废话不多说，搜了一堆资料总结下：

1. 组件中的state或者props发生变化才会渲染render
2. PureComponent 是React官方对其进行了

   shallowEqual（<strong>浅比较</strong>）

   ，也就是如果state或者props是Array或者Object的引用发生改变，就会重新渲染。否则，不会重新render。

   shallowEqual

   从字面意思讲是"浅比较"，那么什么事浅比较呢？
   就是比较一个旧的

   props

   和新

   props

   的或者旧的

   state

   和新的

   state

   的长度是否一致，key是是否相同，以及它们对应的引用是否发生改变。仅仅做了一层的比较。所以这才叫做浅比较。

栗子：

parent组件

import React from 'react'

import List from './child'
class Parent extends React.PureComponent{
    state = {
        array:[1,2,3]
    }
    click(){
        const {array} = this.state;
        array.push(4);
        this.setState({array:array})
    }
    render(){
        const {array} = this.state;
        return (
            <div>
                <List list={array} />
                <button onClick={this.click.bind(this)}>测试</button>
            </div>
        )
    }
}

export default Parent;

List子组件

import React from 'react'

class List extends React.PureComponent{
    render(){
        const {list} = this.props;
        return (
            <ul>
                {
                    list.map((item,idx)=>{
                        return (
                            <li key={idx}>
                                {item}
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}
export default List;

主组件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Parent from './components/parent'
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <Parent/>
        </header>
      </div>
    );
  }
}

export default App;

总结

PureComponent

PureComponent