关于直接修改state里面的值，组件会发生什么样的变化

直接修改state里面的属性值, 比如this.state = {a:1}, this.state.a = 2, 这样是不会触发视图更新的，同理当里面包含了一个引用类型的数据也是，直接修改，也是不会触发更新的，比如this.state = {b: [1,2,3,4]}, this.state.b.push(5), 但是，在继承的是component的情况下手动调用this.setstate({})，也是能让试图更新的，前提是componentshouldupdate返回的是true。但是，这样会引发一个后果，

当我们组件是purecomponent,通过这样写，由于执行的浅比较，引用地址没发生改变，就会导致视图不会更新。

import React, {Component, PureComponent} from 'react';
class HomeIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      a : 1,
      b: [1,2,3,4],
      c: 5,
      d: [{
        m:1
      },
        {
          n : 2,
        }
      ],
      e: 6
    };
  }
  componentDidMount() {
    this.state.a = 2;
    this.state.b = [1,5,6]
  }

  componentWillReceiveProps(nextProps) {
    console.log('----this.props', this.props);
    console.log('----nextProps', nextProps);
  }
  
  // shouldComponentUpdate() {
  //   return true
  // }

  changeb = () => {
    console.log(1);
    const {b, d} = this.state;
    b.push('5');
    d[1].n = 3;
    this.state.c = 6;
    this.setState({
      e: 7,
    })
  };

  render() {
    console.log('我知醒了');
   return (
     <>
       <div>{this.state.a}</div>
       <div onClick={this.changeb}>{this.state.b}</div>
       <div>{this.state.d[1].n}</div>
     </>
   )
  }
}

export default HomeIndex;

对比component和PureComponent的区别