react组件优化，如何避免没有必要的render导致性能浪费

前言

在开发过程中,肯定会出现层层嵌套的关系组件,当我们使用Component时,父组件中的state或者props发生更新时,无论子组件中的state和props是否更新,都会触发子组件的更新,会导致很多没有必要的render,浪费很多性能。今天这这篇文章就教大家如何来解决这个问题

问题重现

先来看如下代码案例：
应该比较好理解，页面中引入了三个组件，然后点击按钮会触发state的改变

import React, {
    Component } from 'react'

export class Root extends Component {
   
    state = {
   
        num: 0
    }
    add = () => {
   
        this.setState({
   num: this.state.num + 1})
    }
    render() {
   
        return (
            <div>Root Page
                <Header />
                <Main />
                <Footer />
                <p>{
   this.state.num}</p>
                <button onClick={
   <