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

Question

我有最简单的应用程序。有一个家长<App>组件和一个 child <MyChildOne>成分。两者都是基于类(Class)的。

谁能解释一下为什么React调用child的render函数<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;

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

你好，1

这是控制台中记录的内容:

代码调用了 MyChildOne 并且 this.counter 的值为:1

代码调用了 MyChildOne 并且 this.counter 的值为:2

很明显React正在调用<MyChildOne>的渲染函数两次 - 但我不明白为什么!!!!

这对我来说没有好处，因为我想将 <App> 中的一系列内容作为 props 传递至<MyChildOne>我想要 <MyChildOne>比如说，渲染一个 <h1>对于该数组的每个“事物”成员。我不想要 <h1> s 被渲染两次!

Answer 1

您不必太担心渲染函数被多次调用。如果您创建的逻辑依赖于多次调用渲染函数，那么您很可能做错了什么。我最好的办法是您正在执行一些其他逻辑，导致渲染函数被多次调用。

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