在 React 中选择使用 JSX 或 JavaScript

在 React 中选择使用 JSX 或 JavaScript

• JSX vs. JavaScript
• React Component Lifecycle

JSX 是 React 最常用的语法之一，它允许我们在 HTML 中嵌入 JavaScript 语句和表达式。但是，如果我们不需要 JSX 又该怎么办呢？让我们一起来了解一下 JSX 和 JavaScript 之间的区别吧！
首先，JSX 允许我们在 HTML 中嵌入 JavaScript 表达式，这对于动态生成 HTML 内容很有帮助。例如，我们可以使用 JavaScript 表达式在模板字符串中插入数据：

const greeting = 'Hello, world!';
<div>{greeting}</div>

而在纯 JavaScript 中，则需要手动拼接字符串：

const greeting = 'Hello, world!';
document.body.innerHTML = '<div>' + greeting + '</div>';

其次，JSX 支持自定义标签，这样可以让我们更容易地理解和识别组件。例如，我们可以创建一个 MyComponent 组件，然后在 JSX 中这样使用：

<my-component />

而在 JavaScript 中，我们必须显式地调用构造函数：

new MyComponent().mount(document.body);

最后，JSX 提供了一些实用的功能，如条件渲染和循环渲染。例如，我们可以很容易地根据条件渲染不同的元素：

{condition ? <div>True</div> : <div>False</div>}

在 JavaScript 中，则需要手动编写 if 语句：

if (condition) {
  const element = document.createElement('div');
  element.innerText = 'True';
} else {
  const element = document.createElement('div');
  element.innerText = 'False';
  document.body.appendChild(element);
}

虽然 JSX 更加直观和简洁，但是在某些情况下，我们可能还是希望使用 JavaScript 来替代 JSX。此时可以使用 jsx-to-js 工具，它可以把 JSX 转换为 JavaScript，如下所示：

jsx-to-js('<div>{hello}</div>') // ->
createElement('div', null, hello)

总之，JSX 是 React 最常用的语言，但它不是必须的。如果您喜欢 JavaScript，那么可以选择使用 jsx-to-js 工具将 JSX 转换为 JavaScript，以便在 React 中使用 JavaScript 代码。
React 组件的生命周