11_render函数的优化

//PureComponent  实现 shouldComponentUpdate的优化
import React, { PureComponent } from 'react'
import Home from './Home'
import Recommend from './Recommend'
import Profile from './Profile'

export class App extends PureComponent {
    constructor(){
        super()
        this.state ={
            message : "hello world",
            count:0
        }
    }
    //nextProps（组件传过来的参数）,newState（更新后的state）两个参数
    // 性能优化  有更改才重新执行render
    // shouldComponentUpdate(nextProps,newState){
    //     // console.log(nextProps); 
    //     if(this.state.message !==newState.message ||this.state.count !==newState.count ){
    //         return true
    //     }
        
    // }
    ChangText(){
        this.setState({message:"你好，李银河！！"})
    }
    increment(){
        this.setState({count:this.state.count+1})
    }
  render() {
    const {message,count} = this.state
    return (
      <div>
        <h2>App-{message}-{count}</h2>
        <button onClick={e=>this.ChangText()}>按钮</button>
        <button onClick={e=>this.increment()}>+1</button>
        <Home message={this.state.message}/>
        <Recommend count = {count}/>
        <Profile message={message}/>
      </div>
    )
  }
}

export default App

import React, { PureComponent } from 'react'

export class Home extends PureComponent {
    constructor(props){
        super(props)
        this.state ={
            friend:[]
        }
    }
    // shouldComponentUpdate(Props,newState){
    //     // 对比自己的state是否有变化
    //     // console.log(Props);
    //     // console.log(this.props);
    //     if(this.props.message !== Props.message){
    //         return true
    //     }
    // }

  render() {
    console.log("Home中render被执行");
    return (
      <div>
        <h2>Home+{this.props.message}</h2>
      </div>
    )
  }
}

export default Home

import React, { PureComponent } from 'react'

export class Recommend extends PureComponent {

    // shouldComponentUpdate(Props,newState){
    //     if(this.props.count !== Props.count){
    //         return true
    //     }
        
    // }
  render() {
    console.log("Recommend中render被执行");
    return (
      <div>
        <h2>Recommend+{this.props.count}</h2>
      </div>
    )
  }
}

export default Recommend

import { memo } from "react"

const Profile = memo(function Profile(props){
    console.log(11111);
    //mmemo函数实现函数组件的性能优化
    return(
         <h1>Profile: {props.message}</h1> 
    )
   
})
export default Profile