import React from "react";
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      age: 66
    }
  }
  render() {
    console.log('Home被渲染了');
    return (
      

        
Home
        
{this.state.age}
      
    )
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'xiebenyin'
    }
  }
  render() {
    console.log('App组件被渲染了');
    return (
      

        
App
        
{this.state.name}
         this.btnClick()}>btn
        
      
    )
  }
  btnClick() {
    this.setState({
      name: 'xby'
    })
  }
}

export default App;

• 修改  App 组件中的  this.state ， Home 子组件也会被重新渲染

类组件优化性能

import React from "react";
class Home extends React.PureComponent { // 自己的 this.state 没有发生改变就不会重新渲染
  constructor(props) {
    super(props);
    this.state = {
      age: 66
    }
  }
  render() {
    console.log('Home被渲染了');
    return (
      

        
Home
        
{this.state.age}
      
    )
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'xiebenyin'
    }
  }
  render() {
    console.log('App组件被渲染了');
    return (
      

        
App
        
{this.state.name}
         this.btnClick()}>btn
        
      
    )
  }
  btnClick() {
    this.setState({
      name: 'xby'
    })
  }
}

export default App;

• 使用  React.PureComponent  创建出来的组件，会自动进行优化，父组件的  this.state 发生改变不会重新渲染子组件

函数式组件 

import React from "react";
const MemoHome = React.memo(function (){ // 返回一个优化后的组件
  console.log('Home被渲染了');
  return (
    
Home
  )
})

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'xiebenyin'
    }
  }
  render() {
    return (
      

        
App
        
{this.state.name}
         this.btnClick()}>btn
        
      
    )
  }
  btnClick() {
    this.setState({
      name: 'xby'
    })
  }
}

export default App;

• 使用  React.memo 优化函数式组件，父组件自身的  this.state 发生改变，子组件不会重新渲染