Question

我拥有最简单的应用程序。有一个父<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>渲染{{1 }}用于该数组的每个“事物”成员。我不希望<h1>呈现两次！

Answer 1

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

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

Answer 2

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

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

 state = {
     counter: 0
  }

。然后像这样更改状态，

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

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

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

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

2 个答案: