传统上，开发者将标记和逻辑分离到不同的文件中，用HTML来做结构，用CSS来做造型，然后写JavaScript来处理交互和数据操作。
但是，如果有一种方法可以将这些技术结合起来，简化开发过程，使其更容易建立复杂的用户界面，那会怎么样呢？这就是JSX的作用。
在这篇文章中，你将了解什么是JSX，它是如何工作的，以及为什么它对在网络开发中构建动态用户界面很重要。
让我们更详细地探讨这一革命性的技术。
什么是JSX?
JSX(JavaScript XML)是JavaScript的一个语法扩展，它允许开发者在JavaScript文件中编写类似HTML的代码。它是由Meta（以前的Facebook）开发的。
JSX的语法类似于HTML，有打开和关闭标签、属性和嵌套元素。
例如，你可以写下面的JSX代码来渲染一个简单的标题元素：
const heading = <h1>Hello, JSX!</h1>;
这段代码看起来像HTML，但它是JavaScript。const关键字创建了一个名为标题的新变量，该变量的值是JSX表达式的结果。
JSX是如何工作的？
JSX在浏览器中执行之前被转换为普通的JavaScript。这种转换是通过一个叫做转码器的工具完成的。最流行的JSX转码器是Babel。
Babel将JSX代码转换为一系列的函数调用。这些函数调用相当于JSX中写的类似HTML的代码。然后，浏览器可以执行产生的JavaScript代码。
例如，下面的JSX代码：
const element = <h1>Hello, world!</h1>;
被转化为以下JavaScript代码：
const element = React.createElement("h1", null, "Hello, world!");
这种转换使开发人员能够以熟悉和容易阅读的语法编写代码，同时仍然利用JavaScript的力量和灵活性。
JSX和React
JSX是React的一个组成部分，允许开发者在一个文件中编写这些组件的标记和逻辑。
下面是一个React组件中的JSX代码的简单例子：
import React from 'react';
function Greet() {
return <h1>Hello World!</h1>;
}
export default Greeting;
在这个例子中，你有一个名为 Greet 的功能组件，该组件渲染了一个带有问候信息的 h1 元素。
React编译器将把这段代码转化为可以被浏览器执行的优化的JavaScript代码，使该组件在屏幕上呈现。
下面是React编译器将把 Greet 组件转换成的内容：
import React from 'react'
function Greet() {
return React.createElement("h1", {}, "Hello, World!")
}
在这段代码中，JSX代码已被转化为 React.createElement 调用，创建与原始JSX代码相同的结构和内容。
这就是React编译JSX代码时在幕后发生的事情，使其能够被浏览器执行。然而，转换后的代码可能比原始JSX代码的可读性差。
在React第17版中，引入了新的JsX转换功能，它自动从React包的新入口点导入特殊函数，允许开发人员使用JsX，而不必在文件顶部导入React。
// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}
使用JSX的JavaScript表达式
在JSX中，JavaScript表达式可以直接嵌入到标记中以动态生成内容。这允许开发者使用JavaScript代码来计算值，执行操作，并在他们的JSX组件中有条件地渲染内容。
这个例子显示了如何在JJSX中使用两个JavaScript表达式：
import React from 'react';
const MyComponent = () => {
const name = 'John';
const age = 30;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old.</p>
<p>Next year, you will be {age + 1} years old.</p>
{age >= 18 && <p>You are an adult.</p>}
</div>
);
};
export default MyComponent;
在这个例子中，像{name}, {age}, {age + 1}, 和 {age >= 18 && <p>You are an adult.</p>} 这样的JavaScript表达式被用来根据姓名和年龄变量的值来动态渲染内容。
在JSX中使用CSS
CSS可以通过各种方式应用于JSX组件，如内联样式、独立的CSS文件或CSS-in-JS库。内联样式是使用JavaScript对象直接在JSX标记中定义的，而单独的CSS文件或CSS-in-JS库允许组件的外部和模块化样式。
这个例子显示了如何使用JSX中的style属性，将使用JavaScript对象定义的内联样式应用于元素：
import React from 'react';
const MyComponent = () => {
const styles = {
backgroundColor: 'blue',
color: 'white',
padding: '10px'
};
return (
<div style={styles}>
<h1>Hello, World!</h1>
<p>This is a component with inline styles.</p>
</div>
);
};
export default MyComponent;
在这个例子中，像 backgroundColor 、 color 和padding这样的CSS属性被设置为style对象中的键值对，而它们的值是代表CSS值的字符串。
注意：虽然内联样式提供了灵活性和简单性，但建议使用CSS类或CSS-in-JS库，以便在更大的应用程序中获得更复杂或可重复使用的样式。
6条重要的JSX规则
在编写JSX代码时，你应该遵循一些规则，以确保代码的有效性和易读性。
1. 总是返回一个单一的根元素
在JSX中，你必须总是返回一个单一的根元素。这意味着你所有的JsX代码必须包含在一个单一的最外层元素中。例如，这是有效的JSX：
return ( <div> <h1>Hello World!</h1> <p>This is my first React component.</p> </div> )
但这并不是因为它返回两个元素而不是一个：
return ( <h1>Hello World!</h1> <p>This is my first React component.</p> )
在将HTML代码转换为JJSX时，必须牢记这一点。
2. 使用className而不是class
在HTML中，你会使用 class 属性来指定一个元素的CSS类别。然而，在JSX中，你需要使用 className 属性来代替。比如说：
// Good <div className="my-class">This element has a CSS class.</div> // Bad <div class="my-class">This element has a CSS class.</div>
使用 className 而不是 class 是很重要的，可以避免命名冲突，因为 class 是JavaScript中的一个保留关键字。
3. 对JavaScript表达式使用大括号
当你需要在JSX代码中包含一个JavaScript表达式时，你需要用大括号{}来包裹它。这可以用于任何事情，从显示动态数据到有条件地渲染组件。下面是一个例子：
// Good
<div>{myVariable}</div>
// Bad
<div>myVariable</div>
你也可以在大括号内执行数学运算，如：
<p>The total cost is {25*10}</p>
另外，在你的大括号内，你可以使用三元运算符设置条件语句：
<h1>{(x) < 15 ? "Welcome" : "Goodbye"}</h1>
下面是一个用React组件的更好的例子：
function Greeting() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please log in.</h1>
)}
</div>
);
}
在这个例子中，我们定义了一个Greeting组件。该组件使用三元操作符，根据 isLoggedIn 的值，有条件地渲染一个问候语。如果 isLoggedIn 为 true，该组件将渲染一个 h1 元素，其文本为 “Welcome back!”。如果 isLoggedIn 是 false，该组件将呈现一个 h1 元素，其文本为 “Please log in”。
4. 在JSX中对大多数东西使用camelCase
在JSX中，大多数东西都使用camelCase，包括属性、事件处理程序和变量名。这个惯例与JavaScript的命名惯例一致，有助于保持可读性。
例如，使用 onClick 而不是 onclick ，使用 className 而不是 class 。
// Good
<button onClick={handleClick} className="btn">Click me!</button>
// Bad
<button onclick={handle_click} class="btn">Click me!</button>
5. 始终使用闭合标签
在JSX中，你需要始终使用闭合标签，即使它们没有任何内容。比如说：
// Good <div></div> // Bad <div/>
6. 对空的元素使用自闭合标签
如果你有一个没有任何内容的元素，你可以用一个自闭合标签来代替开闭标签。
// Good <img src="my-image.jpg" alt="My Image"/> // Bad <img src="my-image.jpg" alt="My Image"></img>
为什么JSX对网络开发很重要？
JSX对网络开发很重要，因为：
- 它允许开发者以更直观和熟悉的方式构建用户界面。
- 开发者可以使用JSX来描述他们的用户界面的结构，而不是直接操作DOM，这种方式更像是在写HTML。
- 它允许更有效和灵活的开发。因为JSX只是JavaScript，开发者可以利用JavaScript的所有功能来创建更复杂和动态的用户界面。
- 它是React库的一个重要组成部分，React库是现代网络开发中构建用户界面的最流行的选择之一。如果你想使用React，你将需要学习JSX。
小结
JSX是JavaScript的一个语法扩展，它允许开发者在JavaScript文件中编写类似HTML的标记。这使得为网络应用程序创建动态和互动的用户界面更加容易。
你已经学会了一些在使用JSX时需要遵循的规则–通过遵循这些规则，我们可以写出干净、可读、可维护的代码，并与JavaScript的命名惯例保持一致。
评论留言