React组件优化

Component的2个问题

1.只要执行setState(),即使不改变状态数据，组件也会重新render(),降低效率；
2.只要当前组件重新render(),就会自动重新render子组件，即使子组件没有用到父组件的任何数据；

提高效率的做法

只有当组件的state或者props数据发生改变时才重新render;

原因：
Component中的shouldComponentUpdate()方法如果不做处理，便会一直返回ture;

解决办法

1.自己重写shouldComponentUpdate()方法，比较新旧state或props数据，如果有变化才返回true,如果没有就返回false；
2.使用PureComponent，该Component重写了shouldComponentUpdate()方法，只有state和props有变化就会返回true；
这里要注意一点，重写的方法只是state和props对象的浅比较，如果只是对象内部的数变化了，不会比较出来，还是会返回false;所以不要直接在对象上修改，而要重新产生新的对象；
项目中一般采用PureComponent方式进行优化；

        // 这种方式并不会引起组件的渲染
        const obj = this.state;
        obj.carName = '奔驰'
        this.setState(obj)
        // 需要重新产生新的对象才可以
        this.setState({carName: '奔驰'})