react基础知识-10.PureComponent

10.1 实现性能优化

定制shouldComponentUpdate后的Component

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

export default class PureComponentPage extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      counter:0,
      obj:{
        num:2
      }
    }
  }
  setCounter = ()=>{
    this.setState({
      counter:100,
      // obj:{
      //   num:200
      // }
    })
  }
  render(){
    const {counter,obj} = this.state
    console.log("render")
    return (
      <div>
        <h1>PureComponentPage</h1>
        <div onClick={this.setCounter}>counter:{counter}</div>
      </div>
    )
  }
}

10.2 浅比较

缺点是必须要用class形式，而且要注意是浅比较

// 比较值相等，或者对象含有相同的键，其属性值相等
function shallowEqual(objA:mixed, objB:mixed):boolean {
  if (Object.is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
    return false;
  }

  var keysA = Object.keys(objA);
  var keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  for (var i = 0; i < keysA.length; i++) {
    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
      return false;
    }
  }

  return true;
}

10.3 和Component相比

React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate(),而React.PureComponent 中以浅层对⽐ prop 和 state 的方式来实现了该函数。如果赋予 React 组件相同的 props 和 state， render() 函数会渲染相同的内容，那么在某些情况下使用 React.PureComponent 可提高性能

代码下载地址:https://gitee.com/JingYaBei/my-app.git