react 性能提升（二） PureComponent

介绍

所谓的提升性能就是在某些场景下优化react的render渲染次数

1. 普通组件的话+shouldComponentUpdate ------------- 点击跳转介绍
   • true 执行 render
   • false 不去执行 render
2. 纯组件PureComponent 内部采用浅比较实现的（只能比较基本数据类型，遇到数组对象就虚了） ⬅⬅⬅⬅⬅ 本文介绍
3. 16.6版本后推出react.memo方法，可以配合函数式组件一起来去提升react性能。-------------- 点击跳转介绍

前景提要（可略过）

• 当我们需要重复使用某个组件的时候，而且传值一样，那么我们可以把组件卸载 循环里面，但这样以来，当我们某个参数发生变化的时候，会重复多次执行该组件，这样对于性能的消耗是不小的，我们只是想让受到数据影响的地方发生渲染执行，而不是全部执行

  render(){
    let {list} = this.state;
    return (
      <ul>
        {
          list.map(item=>{
            return <Three flag={item.flag} key={item.id} item={item} handleChange={this.handleChange}/>
          })
        }
      </ul>
    )
  }

---

比如：

• 我们有三条数据，点击后改变 checked 的 true 或 false 的值
• 但是我们只改变其中的一条数据，其他也跟着渲染了
  

PureComponent

需要注意的地方：

import React, { Component,PureComponent } from 'react'

export default class Two extends PureComponent {
 ... ...
}

• PureComponent纯组件 内部不能再去写shouldComponentUpdate
• 纯组件内部进行了浅比较
  • 基本类型：他会根据外部传入的属性，新的属性与旧的属性是否一致，如果一致的话，就不会走render
  • 引用类型：他会各级外部传入的属性，新的属性与旧的属性地址是否一致，如果一致的话，就不会走render

代码展示：

//子组件
import React, { Component,PureComponent } from 'react'

export default class Three extends PureComponent {

    state = {
        a:10
    }
    render() {
        console.log("two-render")
        return (
            <li>
              <input type="checkbox" checked={this.props.item.flag} onChange={this.props.handleChange.bind(this,this.props.item.id)}/>
              {this.props.item.text}
            </li>
        )
    }
}