react组件优化之React.PureComponent,React.memo

在开发中我们经常会考虑项目的优化问题，react作为现在前端的热门框架用的人肯定是非常的多。项目的优化问题也是非常重要的一部分，能大大提高项目的流畅度，用户体验会非常好。react项目中会用到大量的组件嵌套，减少一些组件的不必要的渲染，可以大大减少损耗。

React.PureComponent和React.memo比较相似，都可以控制组件什么时候应该渲染，但是是浅比较，这意味着对于数组和对象不会进行深层次的比较。
下面我们来看一个例子：
React.PureComponent要搭配类组件；
React.memo搭配函数组件

父组件

class Parent extends React.Component {
  state = {
    content:[{name: "name", age: 0},{name: "name", age: 0}]
  }
  componentDidMount(){
    setInterval(() => {//每隔一秒赋值一次，每次赋的值相同查看子组件的渲染情况
      this.setState({ content: [{name: "jock", age: 20},{name: "bob", age: 30}] })
    },1000)
  }
  render(){
    return (
      <div>
        {this.state.content.map((item, index) => <Son data={item} key={index}></Son>)}
      </div>
    )
  }
}

子组件

function Son(props) {
  console.log("i am son");//写个输出看看子组件是否每次都渲染
  return <div>{props.data.name} --- {props.data.age}</div>
}

控制台输出如下：

我们发现即使父组件每次赋的值相同子组件还是会每次都渲染，显然这不是我们想要的结果。

React.PureComponent

class Son extends React.PureComponent {
  render(){
    console.log("i am son")
     return <div>{props.data.name} --- {props.data.age}</div>
  }}

控制台输出如下：

我们发现结果和之前一样，这就是我们之前说到的浅比较的原因。接下来我们改变一下我们的父组件给子组件的传值方式修改父组件如下：

class Parent extends React.Component {
  state = {
    content:[{name: "name", age: 0},{name: "name", age: 0}]
  }
  componentDidMount(){
    setInterval(() => {
      this.setState({ content: [{name: "jock", age: 20},{name: "bob", age: 30}] })
    },1000)
  }
  render(){
    return (
      <div>
        {this.state.content.map((item, index) => <Son {...item} key={index}></Son>)}
      </div>
    )
  }
}

把之前的自定义属性传值变为了es6的扩展运算符传值。那么子组件接收传过来的值也要发生改变

class Son extends React.PureComponent {
  render(){
    console.log("i am son")
     return <div>{this.props.name} --- {this.props.age}</div>
}}

这时我们查看控制台：

发现只有初始化和第一次修改时子组件重新渲染了。

React.memo

相当于一个高阶组件，可以返回一个组件，使用如下父组件还保持上个例子的最后一次修改后的状态，只修改子组件即可(注释之前的子组件)

const Son = React.memo(function(props){
  console.log("i am son")
  return <div>{props.name} --- {props.age}</div>
})

查看控制台输出：

也是渲染了两次。