React JSX – React 06

React06-React-JSX

序言

React 由 Meta(前身为 Facebook)开发,它使开发人员能够创建可重复使用的组件来完成前端页面。

不过,需要注意的是,从技术上讲,React 并不是一个框架。这是因为它只负责呈现用户界面的组件。不过,React 提供了一种替代 Angular 和 Vue 等框架的解决方案,让我们可以使用它来完成复杂的前端页面功能。

本篇文章将介绍 React 中的一个重要语法--JSX。

JSX 也是编写 React 的常用方法之一,因此我们将在下一节中介绍。

  1. 什么是 JSX?
  2. JSX 语言方法
  3. 使用 JSX 构建 React 组件

什么是 JSX?

在讨论 JSX 之前,让我们回顾一下上一篇文章中讲解的 React DOM 语法。

				
					const dish = React.createElement("h1", "Hello World") ReactDOM.render(dish, document.getElementById("root"))
				
			

上述 React 语法可转换为以下 HTML DOM。

				
					<div id="root">
	<h1><span class="ez-toc-section" id="hello-world"></span>Hello World<span class="ez-toc-section-end"></span></h1>
</div>
				
			

从上面的代码中可以想象到,JavaScript 中的 React 语法相对较难理解,如果是更复杂的 HTML 文件,有数千行,代码就会更加复杂和难以理解。

因此,Facebook 团队在开发 React 的同时,也针对这一缺陷添加了一种新的、更简洁的语法,用于构建前端网络组件:JSX。

JSX 是由 "JS"(JavaScript)和 "X"(XML)两个单词组成的缩写。JavaScript 和 "X "XML 两个单词组成的缩写。虽然 JSX 与 HTML 有些相似,但它本质上是通过 React 语法构建的组件,下面是一个简单的 JSX 示例。

				
					import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
				
			

您可以看到,中间部分与 HTML 语法几乎相同,但程序的开头和结尾部分使用的是 JavaScript 语法。

事实上,计算机会使用一些工具来翻译 JSX 语法,以生成纯 HTML,我们将在后面的文章中讨论这些工具。

JSX 语言方法

JSX 语法看起来像 HTML,但它实际上是 JavaScript 和 React 的语法,因此本文将解释 JSX 语法。

className

在一般的 HTML 语法中,如果我们想给一个标记添加一个类,可以这样写

				
					<h1 class="hi"><span class="ez-toc-section" id="hello-world-2"></span>Hello World<span class="ez-toc-section-end"></span></h1>
				
			

但是,在 JSX 语法中,要在标签中添加任何类,都要将其改为 className。

				
					<h1 classname="hi"><span class="ez-toc-section" id="hello-world-3"></span>Hello World<span class="ez-toc-section-end"></span></h1>
				
			

嵌套元素

JSX 的语法与 HTML 相同,并支持嵌套格式。JSX 还可以创建自己的组件,并将其转化为嵌套格式。

				
					<AnimalList> <Dog /> <Cat /> <Bird /> </AnimalList>
				
			

复合表达式

JSX 本身也是一种 JavaScript 语法,因此它完全支持我们之前讨论过的 JavaScript 语法,以及 ES6 中的语法,例如模板字面。

				
					const fruits = [&quot;Apples&quot;,&quot;Bananas&quot;,&quot;Cherries&quot;] const myElement = (
  <ul>
    <li>{fruits[0]}</li>
    <li>{fruits[1]}</li>
    <li>{fruits[2]}</li>
	 <div>`I Love ${fruits[0]}`</div>
  </ul>
);

				
			

在 JSX 中,您可以用大括号将 JavaScript 变量包起来,也可以使用 Template Literals 语法将字符串与 JSX 结合起来。

JavaScript Map

由于我们可以使用 JavaScript 语法,因此还可以使用 Array 内置的 map 函数与 JSX 集成。

				
					const fruits = ["Apples","Bananas","Cherries"] const myElement = ( <ul> {fruits.map(element=>{ <li>{element}</li> })} </ul> ) ;
				
			

使用地图功能还可以将多个 li 组合在一起。

使用 JSX 构建 React 组件

最后,我们将以最开始的代码为例,讲解如何构建组件。

				
					import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
				
			

第一行和第二行用于调用 react 和 react-dom/client 编写的库,以及使用内置函数。

中间的 const 用于声明,JSX 语法可以放在里面,在里面可以写一些 HTML,写完后就会得到一个名为 myElement 的元素。

最后,我们使用 ReactDOM 中的 createRoot 函数创建一个带有 "id="root "的 DOM,然后将我们创建的 myElement 元素放入根中。

完成上述过程后,您就可以构建 React 组件了。

结论

本文介绍了一种非常重要的 React 语法--JSX,它也用于简化 React 组件的构建。本文还解释了 JSX 的原理、语法以及如何构建组件。

如果您有任何建议或问题,欢迎留言!

如果您喜欢这一系列文章,请不要犹豫,点击 "喜欢 "并分享,让更多人看到它!

引用

React白话运动 07-JSX

React 白話文運動系列

React 如何工作 - React 05

JavaScript 高级函数 - React 04

JavaScript 异步等待 - React 白话运动 03

JavaScript ES6 Object – React 02

JavaScript ES6 - React 01

React06-React-JSX
React06-React-JSX
zh_CN简体中文