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

谁能解释一下为什么 React<MyChildOne> 两次调用 child 的渲染函数？

这是我的<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>两次渲染函数——但我不明白为什么！！！！

这是没有好到我，因为我想通过props的东西数组从<App>到<MyChildOne> ，我想<MyChildOne>呈现，让我们说，一个<h1>该阵列的每一个“东西”成员。我不希望<h1>s 被渲染两次！