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

Question

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

任何人都可以解释为什么React两次调用子项<MyChildOne>的渲染功能？

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

浏览器中的输出是这个：

Hello，1

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

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

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

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

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

Answer 1

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

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

Answer 2

我不确定为什么，但这仅在严格模式中发生。我用您显示的相同代码创建了一个example project。尝试删除index.js文件中的React.StrictMode标记。您会看到MyChildOne组件仅渲染一次。

此外，如果要在类中设置属性并在render方法中使用它，则应使用state。像这样，

 state = {
     counter: 0
  }

。然后像这样更改state，

this.setState({counter: this.state.counter + 1});

它将正确地重新渲染您的组件。但是never更改render方法内部的状态；它会破坏您的代码。

如果您不想使用状态和生命周期方法，请不要使用类组件。请使用功能组件。