面试题：React 是否必须使用 JSX？为什么？

不，React 并不强制要求使用 JSX。

JSX 是一个语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的标记。虽然在现代 React 开发中 JSX 几乎是标配，但从技术上讲，你完全可以不用它。

1. 不用 JSX：使用 React.createElement()

React 的核心是创建虚拟 DOM 节点（即 React 元素）。React.createElement() 是这个过程的底层 API。

示例：不使用 JSX

// ❌ 没有 JSX 的写法
import React from 'react';

function Greeting(props) {
  // 使用 React.createElement 手动构建 UI
  return React.createElement(
    'h1', // 标签类型
    { className: 'greeting' }, // 属性对象 (props)
    'Hello, ', // 子节点
    props.name // 另一个子节点
  );
}

// 复杂一点的例子
function App() {
  return React.createElement(
    'div',
    { id: 'app' },
    React.createElement(Greeting, { name: 'Alice' }),
    React.createElement('p', null, 'Welcome to my app!')
  );
}

这完全合法，并且会被 React 正确渲染。

---

2. 使用 JSX：更直观的语法

JSX 是上述 React.createElement() 调用的语法糖。上面的 Greeting 组件用 JSX 写就是：

// ✅ 使用 JSX 的写法
import React from 'react';

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello, {name}
    </h1>
  );
}

function App() {
  return (
    <div id="app">
      <Greeting name="Alice" />
      <p>Welcome to my app!</p>
    </div>
  );
}

3. JSX 在幕后做了什么？

关键在于，JSX 并不是浏览器直接理解的 JavaScript。它需要被转译成普通的 JavaScript 代码。

• Babel 等工具会将 JSX 语法转换为 React.createElement() 调用。
• 上面的 JSX <h1>Hello, {name}</h1> 最终会被编译成：React.createElement('h1', null, 'Hello, ', name);

你可以通过 Babel REPL 工具亲自验证这一点。

---

4. 为什么推荐使用 JSX？（即使不是必须）

尽管不是必须的，但强烈推荐使用 JSX，原因如下：

原因	说明
可读性高	JSX 让 UI 结构一目了然，开发者可以像写 HTML 一样构建界面，极大地提高了代码的可读性和可维护性。
开发效率	编写 JSX 比手动调用 React.createElement() 快得多，代码量也少得多，尤其对于复杂的组件树。
错误提示更好	JSX 编译器（如 Babel）能提供更精确的语法错误信息（比如告诉你第几行 JSX 有问题），而手写的 createElement 链式调用很难定位错误。
与现代工具链集成	Create React App、Vite 等脚手架默认支持 JSX，编辑器（VS Code）对 JSX 有完善的语法高亮和自动补全支持。
社区标准	几乎所有的 React 教程、文档、开源项目都使用 JSX，它是事实上的标准。

---

5. 什么时候可能不用 JSX？

• 学习目的：为了深入理解 React 的工作原理，手动编写 createElement 有助于理解虚拟 DOM 的创建过程。
• 特殊需求：极少数情况下，你可能需要动态生成非常复杂的 UI 结构，直接操作 createElement 可能更灵活（但通常有更好的解决方案）。
• 环境限制：如果构建工具无法配置 JSX 转译（极其罕见）。

---

总结

• 技术上：React 不需要 JSX。你可以只用 React.createElement() 来构建应用。
• 实践上：JSX 是强烈推荐且几乎必备的开发方式。它通过将类 HTML 语法转换为 React.createElement() 调用来简化 UI 开发。
• 本质：JSX 只是一个语法糖，最终都会被编译成 React 能理解的 JavaScript 函数调用。

结论：虽然“必须”与否的答案是否定的，但在实际开发中，不使用 JSX 就像不用锄头徒手种地——理论上可行，但效率极低且不切实际。因此，掌握和使用 JSX 是学习 React 的必要部分。