react 一些优化

[heyLiup]

React官方提供优化检测 在url加入/？react_perf 在chorm控制台查看performance

• 单组件优化
  1.react绑定事件优化

                this.handleClick=this.handleClick.bind(this)
                <p>{()=>{this.handleClick()}}</p>
                <p>{this.handleClick.bind(this)}</p>

                上面的优先级如图，只有第一种会只渲染一次， 
                其余两种会在每一次render的时候 bind一次
  2.组件属性优化

            <Demo name={{name:'liu'}}></Demo> 
               这样写会在每一次render生出一个对象
               我们先定义好name对象属性，通过this.name去访问

• 组件之间优化
  1. 在父组件数据跟新渲染的时候，他所有的子组件也会跟着渲染，会浪费
     很多不必要的性能，我们就定义shouldComponentUpdate()来决定是否渲染
  2. shouldComponentUpdate(nextProps,nextState) 通过遍历比教this.props和nextProps
     来决定return false（不渲染）还是return true
  3. react 16 中对于纯组件 可以定义 React.PrueComponent来确定这是纯组件，
     不随着父组件的跟新而更新(React为了性能考虑，只做浅层次的对比)
  4. 借助第三方库 immutable 和 reselect
  5. virtual dom 优化，在用数组遍历每个节点时，每个节点的key用V不用i，
     应为i为下标是随时可以变的在数组前面插入的时候