React中render函数的优化

核心原理

1. 通过shouldComponentUpdate()方法，判断是否需要更新组件
2. 通过React.memo()方法，判断是否需要更新组件
3. 通过React.PureComponent()方法，判断是否需要更新组件

下面我们来看一个例子：

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",
            counter:0
        }
    }
    
    // shouldComponentUpdate(nextProps,newState){
    //     // App进行性能优化的点
    //     if(this.state.message !== newState.message || this.state.counter !== newState.counter){
    //         return true
    //     }
    //     return false
    // }
    
    changeText(){
        this.setState({message:"你好，世界"})
        // this.setState({message:"Hello World"})
    }
    
    increment(){
        this.setState({counter:this.state.counter + 1})
    }
     
    render(){
        console.log("App render")
        const { message,counter } = this.state
        
        return (
            <div>
                <h2>App-{message}-{counter}</h2>
                <button onClick={e => this.changeText()}>修改文本</button>
                <button onClick={e => this.increment()}>counter+1</button>
                <Home message={message}></Home>
                <Recommend counter={counter}></Recommend>
                <Profile message={message}></Profile>
            </div>
        )
    }
}

export default App

上面代码中，我们通过PureComponent实现了组件的性能优化。接下来我们通过React.memo()来实现组件的性能优化，也就是我们的Profile组件。

Porfile组件

请看代码：

import { memo } from "react"

const Profile = memo(function(props){
    console.log("profile render")
    return <h2>Profile:{props.message}</h2>
})

export default Profile

上面我们使用了React.memo()方法来实现组件的性能优化。是不是很简单呢？我们只需要在组件的函数式组件上使用React.memo()方法，然后就可以实现组件的性能优化了。

Home组件

Home组件的优化方法是使用的shouldComponentUpdate()方法。我们通过该方法来判断是否需要更新组件，代码如下：

import React,{Component} from "react";

class Home extends Component{
    constructor(props){
        super(props)
        
        this.state = {
            friends:[]
        }
    }
     
    shouldComponentUpdate(newProps,nextState){
        // 自己对比State是否发生变化：this.state 和 nextState
        if(this.props.message !== newProps.message){
            return true
        } 
        return  false
    }
    
    render(){
        console.log("Home render")
        return (
            <div>
                <h2>Home Page:{this.props.message}</h2>
            </div>
        )
    }
}

export default Home

Recommend组件

Recommend组件的优化方法是使用的React.PureComponent方法。和Home组件的优化方法一样，我们通过该方法来判断是否需要更新组件，代码如下：

import React,{PureComponent} from "react";

export class Recommend extends PureComponent{
    render(){
        console.log("Recommend render")
        return (
            <div>
                <h2>Recommend Page:{this.props.counter}</h2>
            </div>
        )
    }
}

export default Recommend

总结

通过上面的代码，我们可以看出，使用React.memo()方法和React.PureComponent()方法来实现组件的性能优化，都是非常简单的。我们只需要在组件的函数式组件上使用React.memo()方法或者React.PureComponent()方法，然后就可以实现组件的性能优化了。如果我们使用的是函数组件式开发用的是React.memo()方法，如果我们使用的是类组件式开发用的是React.PureComponent()方法。

注意事项

1. React.memo()方法和React.PureComponent()方法都是用于函数式组件的，不能用于类组件。

2. React.memo()方法和React.PureComponent()方法都是用于组件的性能优化的，不能用于组件的状态管理。
   最后我们附上浏览器上的效果图：
   

   感谢大家观看，我们下次再见！