javascript - 在React中，为什么子组件的render函数被调用两次？

我有最简单的应用程序。有一个父<App>组件和一个子<MyChildOne>组件。两者都是基于类的。

谁能解释为什么React两次调用子<MyChildOne>的render函数？

这是我的<App>代码：

import React from "react";
import "./App.css";
import MyChildOne from "./MyChildOne.js";

class App extends React.Component {
  render() {
    return (
      <div>
        <MyChildOne />
      </div>
    );
  }
}
export default App;

这是我的<MyChildOne>代码：

import React from "react";

class MyChildOne extends React.Component {
  counter = 0;

  render() {
    this.counter = this.counter + 1;

    console.log(
      "Code has called MyChildOne and this.counter has value: " + this.counter
    );

    return <h1>Hello, {this.counter}</h1>;
  }
}

export default MyChildOne;

浏览器中的输出是这样的：

你好1

这是在控制台中记录的内容：

代码已调用MyChildOne，this.counter的值为：1

代码已调用MyChildOne，this.counter的值为：2

很明显，React两次调用<MyChildOne>的render函数-但我不明白为什么！

这对我没有好处，因为我想将道具从<App>传递到<MyChildOne>的数组，并且我想<MyChildOne>为该数组的每个“事物”成员呈现一个<h1> 。我不希望<h1>渲染两次！

最佳答案

您不必担心多次调用render函数。如果要创建依赖于多次调用render函数的逻辑，则很可能在做错误的事情。最好的办法是，您正在执行其他一些逻辑，导致渲染函数被多次调用。

您应该注意，如果您的父组件重新渲染，那么您的子组件也会重新渲染。我为您提供的代码创建了一个最小的示例，这清楚地表明您的问题在其他地方。
https://codesandbox.io/s/react-example-6ud9d