理解React中的JSX：变量为何声明在所用函数作用域外

这种写法不是为了写起来更简便，是官方示例刻意遵循的职责分离设计，核心原因有三点：

• 保证工具函数的复用性。formatName本质是个通用纯函数，它的唯一职责是接收带firstName、lastName属性的对象，返回拼接完成的姓名格式字符串，不需要关心传入的数据来源、具体值是什么。如果把user对象直接声明在函数内部，这个函数就和固定数据强绑定，永远只能返回Harper Perez这一个结果，后续要拼接其他用户的姓名时完全没法复用，等于白抽了这个函数。
• 贴合真实开发的数据流逻辑。实际React项目中，用户信息这类数据大多来自接口响应、父组件props传递、全局状态管理，从来不会硬编码在工具处理函数里。示例把user放在函数外部，就是在模拟「外部数据传入处理逻辑计算后，再渲染到页面」的常规流程，符合真实开发的写法习惯。
• 服务于示例本身的教学目的。这段代码出现在JSX语法入门章节，核心要演示的知识点就是：JSX的大括号内可以执行任意JS表达式，你可以传入外部变量、调用外部函数完成动态计算。如果把user写在formatName内部，就没法演示「给函数传参处理外部数据」这个关键用法，初学者很容易误以为函数只能使用内部写死的值。

你提到的「把变量声明在函数内更简便」是只看这几行示例产生的错觉：如果把user写在函数内部，单看这个demo确实能少写一个传参步骤，但这种写法是典型的因小失大——逻辑和固定数据强耦合的函数没有任何复用价值，等你需要渲染多个不同用户的姓名时，就得重复写多份几乎一样的格式化逻辑，反而会增加大量冗余代码。

你可以对比下把user写在函数内部的写法，就能明显看出问题：

// 不推荐的写法：数据和逻辑强绑定
function formatName() {
  const user = {
    firstName: 'Harper',
    lastName: 'Perez'
  };
  return user.firstName + ' ' + user.lastName;
}

const element = (
  <h1>
    {/* 调用时无法传入自定义数据，输出结果永远固定 */}
    Hello, {formatName()}!
  </h1>
);

入门阶段看官方示例不用过度纠结代码行数的多少，优先理解示例要传递的核心设计思路就好，这段示例本质就是给初学者演示「逻辑抽离、数据传入、动态渲染」的最基础React写法。

内容的提问来源于stack exchange，提问作者Mwilembo