请选择 进入手机版 | 继续访问电脑版

深入研究JSX

前端开发  / React.js  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-3-9

跳转到指定楼层

JSX简介

JSX是React引入的一项技术。

尽管React无需使用JSX即可完全正常工作,但这是处理组件的理想技术,因此React从JSX中受益匪浅。

起初,您可能会认为使用JSX就像混合HTML和JavaScript(并且您将看到CSS)。

但这是不正确的,因为使用JSX语法时您实际上正在写的是组件UI应该是什么的声明性语法。

而且您正在描述的UI不是使用字符串,而是使用JavaScript,这使您可以做很多事情。

JSX入门

这是定义包含字符串的h1标签的方法:

const element = <h1>Hello, world!</h1>

它看起来像是JavaScript和HTML的奇怪混合,但实际上它全是JavaScript。

看起来像HTML的实际上是用于定义组件及其在标记内的位置的语法糖。

在JSX表达式内,可以很容易地插入属性:

const myId = 'test'
const element = <h1 id={myId}>Hello, world!</h1>

您只需要注意当属性的破折号(-)转换为camelCase语法时,以及以下2种特殊情况:

class 变成 className
for 变成 htmlFor
因为它们是JavaScript中的保留字。

这是一个JSX片段,将两个组件包装到一个div标签中:

<div>
  <BlogPostsList />
  <Sidebar />
</div>

始终需要关闭标签,因为它比XML更多XML(如果您还记得XHTML的日子,那将是熟悉的,但是从那时起,HTML5宽松的语法就赢得了)。在这种情况下,使用一个自动关闭标签。

请注意,我是如何将2个组件包装到中的div。为什么?因为render()函数只能返回一个节点,所以如果要返回2个同级,只需添加一个父级。它可以是任何标签,而不仅仅是div。

转译JSX

浏览器无法执行包含JSX代码的JavaScript文件。必须首先将它们转换为常规JS。

怎么样?通过执行称为转堆的过程。

我们已经说过JSX是可选的,因为对于每条JSX行,都可以使用相应的普通JavaScript替代品,这就是JSX被移植到的内容。

例如,以下两个构造是等效的:

普通JS

ReactDOM.render(
  React.createElement('div', { id: 'test' },
    React.createElement('h1', null, 'A title'),
    React.createElement('p', null, 'A paragraph')
  ),
  document.getElementById('myapp')
)

JSX

ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>A paragraph</p>
  </div>,
  document.getElementById('myapp')
)

这个非常基本的示例只是起点,但是您已经可以看到,与使用JSX相比,普通的JS语法要复杂得多。

在编写执行最流行的方式的时候transpilation是用巴贝尔,运行时是默认选项create-react-app,所以如果你使用它,你不必担心,一切都发生了引擎盖你下。

如果您不使用create-react-app,则需要自己设置Babel。

JSX中的JS

JSX接受任何类型的JavaScript。

每当您需要添加一些JS时,只需将其放在花括号内即可{}。例如,下面是使用在其他地方定义的常量值的方法:

const paragraph = 'A paragraph'
ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>{paragraph}</p>
  </div>,
  document.getElementById('myapp')
)

这是一个基本的例子。花括号接受任何 JS代码:

const paragraph = 'A paragraph'
ReactDOM.render(
  <table>
    {rows.map((row, i) => {
      return <tr>{row.text}</tr>
    })}
  </table>,
  document.getElementById('myapp')
)

如您所见,我们将JavaScript嵌套在JSX中,将其嵌套在JSX中。您可以根据需要进行深入研究。

JSX中的HTML

JSX非常类似于HTML,但实际上是XML语法。

最后,您渲染HTML,因此您需要了解如何在HTML中定义某些内容与如何在JSX中定义它们之间的一些区别。

您需要关闭所有标签
就像在XHTML中一样,如果您曾经使用过它,则需要关闭所有标签:不再需要,
而是使用自动关闭标签:(
其他标签也是如此)

camelCase是新标准
在HTML中,您会发现没有任何大小写的属性(例如onchange)。在JSX中,它们被重命名为其等效的camelCase:

onchange => onChange
onclick => onClick
onsubmit => onSubmit

class 变成 className
由于JSX是JavaScript,并且class是保留字,因此您无法编写

<p class="description">

但是你需要使用

<p className="description">

for转换为的情况相同htmlFor。

样式属性更改其语义
styleHTML中的属性允许指定内联样式。在JSX中,它不再接受字符串,在React中的CSS中,您将看到为什么这是一个非常方便的更改。

形式
表单字段定义和事件在JSX中进行了更改,以提供更多的一致性和实用性。

转播转播
回复

使用道具

9

主题

10

帖子

35

积分

网站编辑

Rank: 8Rank: 8

积分
35
samecool 发表于 2020-3-9 16:01:53

写得还不错:lol

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|ObjectX 超对象 |粤ICP备20005929号
Powered by  © 2019-2020版权归ObjectX 超对象