为什么React选择了JSX？深入对比模板的优劣

江城开朗的豌豆
379 阅读4分钟

作为一名前端开发者，我经常被问到：React为什么使用JSX而不是传统的模板语法？今天我就结合自己的开发经验，聊聊这个话题。

初识JSX的困惑

还记得我第一次接触React和JSX时，心里满是疑问："为什么要把HTML写在JavaScript里？这看起来太奇怪了！" 当时我已经熟悉了Vue的模板语法，觉得那种分离的方式更加清晰。

但随着项目经验的积累，我逐渐理解了JSX的设计哲学。让我通过几个具体例子来说明。

JSX vs 模板：核心差异

逻辑表达能力的对比

先看一个简单的条件渲染场景。在传统模板中，我们经常这样写：

<!-- 模板方式 -->
<div>
  <div v-if="isVisible">可见内容</div>
  <div v-else>其他内容</div>
</div>

而在JSX中，我会这样实现：

function MyComponent({ isVisible }) {
  return (
    <div>
      {isVisible ? <div>可见内容</div> : <div>其他内容</div>}
    </div>
  );
}

或者更复杂的情况：

function UserList({ users, isLoading }) {
  if (isLoading) {
    return <div>加载中...</div>;
  }
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} - {user.age}岁
          {user.isVIP && <span> VIP</span>}
        </li>
      ))}
    </ul>
  );
}

这种写法让我感受到了JSX的强大——它允许我使用完整的JavaScript表达能力，而不是学习一套新的模板语法。

作用域和代码组织

在模板系统中，经常需要定义各种指令和过滤器：

// 模板方式需要额外的过滤器定义
Vue.filter('formatDate', function(value) {
  if (!value) return '';
  return new Date(value).toLocaleDateString();
});

而使用JSX，我可以直接使用JavaScript函数：

function formatDate(date) {
  if (!date) return '';
  return new Date(date).toLocaleDateString();
}

function Article({ title, content, publishDate }) {
  return (
    <article>
      <h1>{title}</h1>
      <time>{formatDate(publishDate)}</time>
      <div>{content}</div>
    </article>
  );
}

这种方式让我的工具函数和组件逻辑保持在同一作用域中，减少了上下文切换的成本。

JSX的实际优势

1. 类型安全

在使用TypeScript时，JSX的优势更加明显：

interface ButtonProps {
  variant: 'primary' | 'secondary';
  size: 'small' | 'medium' | 'large';
  onClick: () => void;
  children: React.ReactNode;
}

function Button({ variant, size, onClick, children }: ButtonProps) {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

TypeScript能够对JSX进行完整的类型检查，这在复杂项目中极大地提高了代码可靠性。

2. 更好的重构体验

当需要重构组件时，JSX让一切变得简单。比如提取子组件：

// 重构前
function UserProfile({ user }) {
  return (
    <div className="profile">
      <img src={user.avatar} alt={user.name} />
      <div>
        <h2>{user.name}</h2>
        <p>{user.bio}</p>
        <div>
          {user.skills.map(skill => (
            <span key={skill} className="skill-tag">{skill}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

// 重构后 - 提取SkillTags组件
function SkillTags({ skills }) {
  return (
    <div>
      {skills.map(skill => (
        <span key={skill} className="skill-tag">{skill}</span>
      ))}
    </div>
  );
}

function UserProfile({ user }) {
  return (
    <div className="profile">
      <img src={user.avatar} alt={user.name} />
      <div>
        <h2>{user.name}</h2>
        <p>{user.bio}</p>
        <SkillTags skills={user.skills} />
      </div>
    </div>
  );
}

这种重构在IDE中很容易完成，而且类型安全得到保障。

模板的优势场景

当然，模板语法也有其优势。对于简单的展示型组件，模板通常更简洁：

<!-- 模板语法确实更简洁 -->
<template>
  <div class="product-card">
    <img :src="product.image" :alt="product.name">
    <h3>{{ product.name }}</h3>
    <p class="price">{{ formatCurrency(product.price) }}</p>
  </div>
</template>

而且模板的学习曲线相对平缓，对于新手更加友好。

我的实践建议

经过多年的项目实践，我认为：

  1. 大型复杂项目：优先选择JSX，它的可维护性和类型安全优势明显
  2. 简单展示型项目：模板语法可能更合适，开发效率更高
  3. 团队技术栈：考虑团队成员的熟悉程度，平衡学习成本

在实际开发中，我经常混合使用两种模式。比如在React项目中使用JSX处理复杂逻辑，同时用类似JSX的语法编写简单展示组件。

结语

JSX不是完美的，但它为复杂前端应用提供了强大的表达能力。正如React团队所说："JSX是JavaScript的语法扩展，它让我们能够用描述UI的语法来编写组件。"

每种技术选择都有其适用场景，关键是理解背后的设计思想，根据项目需求做出合适的选择。希望我的经验分享对你有所帮助！

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

​

avatar
文章
阅读
粉丝