React -PureComponent

• PureComponent 通过props 和state的浅比较来优化render次数，改变了生命周期方法shouldComponentUpdate,并且会自动检查组建是否需要重新渲染,根据源码：

if(this._compositeType === compositeTypes.PureClass){
 shouldUpdate =!shallowEqual(prevProps,nextProps) || !shallowEqual(inst.state,nextState)
}

shallowEqual 只会浅比较props ,state,数组或嵌套的对象是不会被比较的

handleAddData = ()=> {
  console.log('add-')
  const { dataInput } = this.state
  let newArr = dataInput
  newArr.push(
    {
      id: 4,
      name: 'test4',
      value: ''
    }
  )

  this.setState({
    dataInput:newArr
  })
}

<div>
  {
    dataInput.map((item,index)=>{
      return (
        <div key={index}>
          {item.name}
          <input type="value" />
        </div>
      )
    })
  }
  <div>
    <button onClick={this.handleAddData}>点击push 数据</button>
  </div>

执行handleAddData,是不会重新render的，因为数组的地址并没有改变，PureComponent 通过浅比较 认为 dataInput 没有改变

为了避免这种情况发生，我们可以深拷贝一个数组来解决

handleAddData = ()=> {
  console.log('add-')
  const { dataInput } = this.state
  let newArr = [...dataInput] // ...拆分 这里修改
  newArr.push(
    {
      id: 4,
      name: 'test4',
      value: ''
    }
  )

  this.setState({
    dataInput:newArr
  })
}