Fragment - 去除根元素

作用

可以不用必须有一个真实的DOM根标签了，可以使用<></>，但不能有属性，Fragment可以代替空标签的情况下传递属性

使用

  1. import React,{Fragment} from 'react';
  2. <Fragment><Fragment>
  3. 或者
  4. <></>

image.png

PureComponent-解决Component的2个问题

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

原因

Component中的shouldComponentUpdate()总是返回true 效率高的做法: 只有当组件的state或props数据发生改变时才重新render()

解决

办法1: 
    重写shouldComponentUpdate()方法
    比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:  
    使用PureComponent
    PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
    注意: 
        只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
        不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

方式一 : 重写shouldComponentUpdate()方法

shouldComponentUpdate(nextProps,nextState){
    // console.log(this.props,this.state); //目前的props和state
    // console.log(nextProps,nextState); //接下要变化的目标props，目标state
    return this.state.carName !== nextState.carName
}

方式二 : 使用PureComponent

PureComponent会帮你 比较新props 跟 旧的props， 新的state和老的state（值相等,或者 对象含有相同的属性、且属性值相等 ），决定shouldcomponentUpdate 返回true 或者 false， 从而决定要不要呼叫 render function。

注意： 如果你的 state 或 props 『永远都会变』，那 PureComponent 并不会比较快，因为 shallowEqual 也需要花时间。 

import React, { PureComponent } from 'react'

export default class Parent extends PureComponent {

}

注意
对于值类型则没有问题
image.png
正确方式
image.png