了解React中的JSX

Question

所以我知道发生了什么，但我也不知道发生了什么。我的意思是，我从react网站上得到了下面的代码(见下面的代码)，我正在经历理解react以及如何正确使用它的过程。我的问题是，为什么变量& firstName"one_answers";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只被调用一次，所以数据总是相同的。在这种情况下，我同意您可以将数据放入函数中。但此时，您也可以直接删除函数并内联计算格式化的名称。只有当它有助于提高可读性时，将其作为一次性函数才有用。

Answer 2

当user变量在函数外部声明时，数据可以在其他地方更改，函数不需要知道如何获取数据-它只需要知道数据的值。

Answer 3

据我所知，如果我们在函数组件中声明一个函数/变量，它将在每次渲染中创建新的函数/对象，假设我们在循环进程中使用组件，它将影响用户浏览器的内存。因此，创建一个在函数组件之外做一些事情的函数是最佳实践。