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