类组件仅运行两次，而函数仅运行一次，为什么？

Question

我对此代码有疑问。编译时，它向我显示了两次在控制台中显示的消息……它发生在我放置的任何代码中，甚至在我调用方法时。就像该组件在类中运行了两次一样。当它是一种功能时，它不会发生，取决于它是否只执行一次...不是“ Hello world”的消息出现两次，而是仅出现一次。但是好像该组件在类中时已更新或重新加载，并且两次在控制台中收到该消息。我是新来的反应者，我想请您帮助我解决这个问题。

import React, { Component } from 'react'

 class Page extends Component {
    getMessage(){
        console.log("hello1")
    }
    render(){console.log("hello2")
        return (
            <div>
                <h2>Hello world</h2>
                {this.getMessage()}
                
            </div>
        )
    }
}
export default Page;

Answer 1

我很困惑，我拿了您的示例代码，它可以正常使用as is。我想念什么吗？如链接的示例中所示，您可能只需要更新getMessage函数以返回要显示的字符串。希望能有所帮助！

根据，getMessage是一个函数。您肯定需要通过附加()来调用它。

Answer 2

请检查我的解决方案here。

仅显示控制台一次。

（我已经删除了StrictMode，并且运行良好。）

Answer 3

添加您的构造函数并为getMessage()设置绑定

constructor(props)
{
  super(props);
  this.getMessage = this.getMessage.bind(this);
}

然后在您的函数调用{this.getMessage}上，不包括()。