在 React 中的函数内部声明函数

Question

我刚刚遇到了一个 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和getMessage在每一个render电话。
• 如果我制作getName和getMessage分类方法并在内部调用它们renderMessage会是一种改进吗？

谢谢 ：）

Answer 1

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

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

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

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

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

依靠。

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