React PureComponent

PureComponent

父组件

import React, { Component } from 'react'
import Home from './Home'
import About from './About'

export default class App extends Component {
  constructor(){
    super()
    this.state = {
      message: 'hello world',
      age: 18
    }
  }

  changeMessage(){
    this.setState({
      message: this.state.message + '!'
    })
  }

  changeAge(){
    this.setState({
      age: this.state.age + 1
    })
  }

  render() {
    console.log('App')
    return (
      <div>
        <button onClick={ ()=> this.changeMessage() }>修改信息</button>
        <button onClick={ ()=> this.changeAge() }>修改年龄</button>
        <h1>Home</h1>
        <Home message={ this.state.message }></Home>
        <hr />
        <h1>About</h1>
        <About age={ this.state.age }></About>
      </div>
    )
  }
}

子组件1

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    console.log('Home')
    return (
      <div>{this.props.message}</div>
    )
  }
}

子组件2

import React, { PureComponent } from 'react'

export default class About extends PureComponent {
  render() {
    console.log('About')
    return (
      <div>{this.props.age}</div>
    )
  }
}

PureComponent是用来性能优化的

在父组件中若修改age，则父组件和所有的子组件都会重新调用render函数

在父组件中若修改message，则父组件和子组件1会重新调用render函数，子组件2中的props和state都没有修改，所以不会重新调用render函数

PureComponent只会进行浅比较，浅比较就是只比较第一级，对于基本数据类型，只比较值；

对于引用数据类型值，直接比较地址是否相同，不管里面内容变不变，只要地址一样，就认为没变。

memo

memo和PureComponent是一样的，只不过Memo是应用在函数组件中

import React, { PureComponent } from 'react'

const About = memo(function(props){
    return (
        <div>{props.age}</div>
    )
})