了解 React 中的 JSX

Question

所以我知道发生了什么事，但我也不明白发生了什么事。我的意思是，我从 React 网站获得了下面的代码（见下面的代码），我正在经历理解 React 以及如何正确使用它的过程。所以我的问题是，为什么变量“firstName”和“lastName”在它们将使用的函数范围之外声明？在函数的作用域中声明变量不是更容易吗？

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

Answer 1

我看到两种可能性：

1. formatName是一个辅助函数，可能会使用不同的数据多次调用。如果是这种情况，那么您无法在函数内定义数据，因为每次都会不同。如果这是我们所处的场景，那么我认为您展示的代码是有意义的。

2. formatName只被调用一次，因此数据始终相同。在这种情况下，我同意您可以将数据放入函数中。但此时，您也可以删除该函数并内联计算格式化名称。仅当它有助于提高可读性时，将其保留为一次性使用的函数才会有用。