是什么导致 React 子组件重新渲染？答案

【问题标题】：What causes React child component to re-render?是什么导致 React 子组件重新渲染？
【发布时间】：2019-12-16 15:21:30
【问题描述】：

到目前为止，我认为重新渲染子组件的唯一原因是因为更改了传递的道具。但是我创建了一个CodeSandbox，结果发现每次父状态更改时都会重新渲染没有接收任何道具的子组件。所以我的问题是：重新渲染/更新子组件的所有原因是什么？

这里是 App.js 文件：

import React from "react";
import ReactDOM from "react-dom";
import Child from "./Child";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      counter: 0
    };
  }

  componentDidMount() {
    console.log("Parent mounted");
  }

  componentDidUpdate() {
    console.log("Parent updated");
  }

  render() {
    return (
      <div>
        <button
          onClick={() =>
            this.setState(prevState => ({ counter: prevState.counter + 1 }))
          }
        >
          Increment
        </button>
        <button
          onClick={() =>
            this.setState(prevState => ({ counter: prevState.counter - 1 }))
          }
        >
          Decrement
        </button>
        <Child />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这里是子组件：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Child extends React.Component {
  componentDidMount() {
    console.log("Child mounted");
  }

  componentDidUpdate() {
    console.log("Child updated");
  }



  render() {
    return <div />;
  }
}

export default Child;

【问题讨论】：

避免外部代码示例，直接在这里发布。另外我猜你的链接不是最新的
这听起来像是 How does react decide to rerender a component 的副本。
您的子组件当前为空

标签： reactjs

【解决方案1】：

“重新渲染”和“更新过程”之间存在区别：

1.如果一个组件重新渲染，那么它的子组件也将开始更新过程。

2.如果任一组件的shouldComponentUpdate函数返回false，则更新过程中止。

当App改变状态时，其实连App都可能不会重新渲染，如果shouldComponentUpdate返回false，那么App就不会被渲染，子组件肯定也不会。

现在，消费App开始正常重新渲染，那么作为子组件，肯定会启动更新过程，但是如果Child的shouldComponentUpdate返回false，那么Child的更新过程也会被中止，不会被重新渲染-渲染。

【讨论】：