react优化：PureComponent

为什么使用PureComponent？

        1.只要执行setState({}),即使不改变状态，也会重新渲染组件。

        2.只要当前组件重新render，子组件也会随之render，即使子组件没有用到父组件的任何数据。

        导致结果：效率低

原因：

        component中的钩子函数shouldComponentUpDate()总是返回true

解决办法：

        只有当组件的state或props数据发生改变才会重新渲染

       1.方法1

                重写shouldComponentUpdate()方法，比较新旧state或props数据，如果发生变化则返回true，反之则返回false。

shouldComponent(nextProps,nextState){
    if(this.state.属性名 === nextState.属性名) return false
    return true
}

                缺点:不能直接比较state(this.state === nextState)，如果直接比较里面属性值发生变化也会返回true。且当state中属性较多时，比较起来费劲。

         2.方法2

                使用PureComponent，因为PureComponent重写了shouldComponentUpdate()，只有当state或者props数据变化才返回true

                

import React,{PureComponent} from 'react'

class A extends PureComponent{
    render(){
        return (
            <div></div>
        )
    }
}

                缺点:只是进行state和props的浅比较,如果只是数据对象内部数据变了，返回false。且不要直接修改state数据，要产生新的数据。