深入理解JSX

小灰灰 2022-04-22 13:34 228阅读 0赞

JSX是React为JavaScript语法带来的可选扩展，用于在JavaScript代码中编写声明式XML风格语法。

对于Web项目而言，React的JSX提供了一组类似于HTML的XML标签，转译后，XML会被转译为针对React库的函数调用，如下：

<h1>Hello World</h1>

会被转译为：

React.createElement("h1",null,"Hello World");

# 一、JSX与HTML #

对于Web场景而言，JSX看上去就像HTML，但他并不是HTML规范的具体实现。React的创造者只是让JSX足够像HTML，这样就可以用来正确的描述Web界面，并没有忽略这个事实。即他仍然应该遵循JavaScript的风格和语法。

# 二、JSX和HTML的不同之处 #

在使用JSX来编写HTML语法时，应当了解以下三个重要的方面：

*  标签特性采用驼峰式大小写风格；
 *  所有元素都必须闭合；
 *  特性名称基于DOM API而非HTML语言规范；

### 1、标签特性采用驼峰式大小写风格 ###

例如，在HTML中，输入标签可以包含一个可选的maxlength特性：

在JSX中，该特性应该写作maxLength（请注意大写字母L）：

return <input type="text" maxLength="30"/>

### 2、所有元素都必须闭合 ###

由于JSX是XML，因此元素都必须闭合，诸如<br>和<img>这样的标签并不包含结束标签，需要自闭合。所以要使用<br/>而不是<br>，要使用<img src="..."/>而不是<img src="...">。

### 3、特性名称基于DOM API ###

这一点可能难以理解，实际上非常简单。在与DOM API进行交互时，标签特性的名称可能会和在HTML中使用时有所不同。其中一个例子就是class和className。例如，在HTML中：

如果你想要使用普通JavaScript来操作DOM并改变它的类名，你可能会编写这样的代码：

document.getElementById("box").className="some-other-class";

由于JSX只是JavaScript的一种语法扩展，它遵循了DOM所定义的特性命名规范，同样的div用JSX来表示应该是：

return <div id="box" className="some-class"></div>

# 三、JSX的怪异之处 #

### 1、单一根节点 ###

React组件只能渲染一个根节点，想要了解这个限制的原因，我们来看看render函数的一个返回实例：

return (
        <h1>Hello World</h1>
    )

它被转换成一条语句：

return React.createElement("h1",null,"Hello World");

但是，以下代码却是不合法的：

return (
        <h1>Hello World</h1>
        <h2>Have a nice day</h2>
    )

需要明确的是，这并非JSX的限制，而是JavaScript的一个特性：一条返回语句只能返回单个值，而在前面的代码中我们尝试返回两条语句（两次React.createElement调用）。解决的方法很简单：就像你在普通JavaScript中那样，将所有返回值包含到一个根对象中。

return (
       <div>
         <h1>Hello World</h1>
         <h2>Have a nice day</h2>
       </div>
    )

进而被转换成：

return React.createElement("div",null,
        React.createElement("h1",null,"Hello World"),
        React.createElement("h2",null,"Have a nice day"),
    )

它返回单个值，并且是通过合法的JavaScript完成的。

深入理解JSX

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关笔记三、理解React的JSX和上手开发

相关 JSX

相关 React(2).JSX理解

相关 React实战-深入了解JSX

相关 jsx入门

相关深入理解JSX

相关借助babel理解jsx

相关简介JSX

相关 JSX简介

相关 React官网学习实践 - 深入JSX