在 React 中在函数内声明函数

我刚刚遇到了一个 React 代码，我不确定这是否是一个好方法。这是该代码的示例实现。

class App extends React.Component {
  renderMessage = () => {
    function getMessage() {
      return "Hello"
    } 
    function getName() {
      return "Vijay"
    }
    return (
      <h1>{getMessage()} {getName()} !!!</h1>
    )
  }
  render() {
    return (
      <div>
        {this.renderMessage()}
      </div>
    )
  }
}

这里我们调用一个函数renderMessage内部渲染。在renderMessage有两个内部函数被调用renderMessage仅有的。我现在的问题是：-

• 这是一个好的方法吗？不会重新声明方法吗getName and getMessage在每个render call.
• 如果我做getName and getMessage类方法并在内部调用它们renderMessage这会是一种改进吗？

谢谢 ：）

这是一个好的方法吗？它不会在每次渲染调用时重新声明方法 getName 和 getMessage

绝对不是一个好方法，因为 JavaScript 要么具有函数作用域，要么具有块作用域或全局作用域。

您在此范围内定义的任何内容都将仅是此范围的一部分。在你的情况下，功能getMessage and getName将成为一部分renderMessage这是功能范围。

每次调用时，都会定义新函数，而不是重用以前定义的函数。

如果我创建 getName 和 getMessage 类方法并在 renderMessage 中调用它们，这会是一个改进吗？

Depends.

如果此函数需要访问任何组件属性或方法，那么您应该将其放置在组件内部，或者如果这是唯一的实用程序函数，则将其放置在与组件分开的帮助程序库中。 当然，这会有所作为。