Question

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

这是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;

Answer 1

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

1。如果重新渲染组件，则其子组件也将开始更新过程。

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

实际上，当App更改其状态时，甚至可能不会重新渲染App，如果shouldComponentUpdate返回false，则不会渲染App，并且子组件也肯定不会渲染。 / p>

现在，消耗应用程序开始正常的重新渲染，然后作为子组件肯定会启动更新过程，但是如果Child的shouldComponentUpdate返回false，那么Child的更新过程也将被中止并且不会被重新-呈现。

是什么导致React子组件重新呈现？

1 个答案: