如何避免组件没有必要的重新 render

render什么时候被调用

如图所示当 props 或 state 发生改变时， render 函数会被重新调用

组件没有必要的重新 render

在 App 中，有一个计数器的代码，当点击 +1 时，由于 state 发生了改变，那么就会重新执行App 中的 render 函数，而当 App 中的 render 函数被调用时，所有子组件的 render 函数也会被调用，这样就会造成性能上的浪费，因为许多组件根本没有必要重新 render

import React, {
    Component } from 'react';

function Header() {
   
  console.log("Header Render 被调用");
  return <h2>Header</h2>
}

class Main extends Component {
   
  render() {
   
    console.log("Main Render 被调用");
    return (
      <div>
        <Banner/>
        <ProductList/>
      </div>
    )
  }
}

function Banner() {
   
  console.log("Banner Render 被调用");
  return <div>Banner</div>
}

function ProductList() {
   
  console.log("ProductList Render 被调用");
  return (
    <ul>
      <li>商品1</li>
      <li>商品2</li>
      <li>商品3</li>
      <li>商品4</li>
      <li>商品5</li>
    </ul>
  )
}

function Footer() {
   
  console.log("Footer Render 被调用");
  return <h2>Footer</h2>
}

export default class App extends Component {
   
  constructor(props) {
   
    super