《React进阶之路》学习笔记第二章：React基础第一节： JSX

最新推荐文章于 2020-05-19 23:18:02 发布

绀野木棉季丶

最新推荐文章于 2020-05-19 23:18:02 发布

阅读量308

点赞数

分类专栏： React 文章标签： React JSX

本文链接：https://blog.csdn.net/KotomiOvO/article/details/103040653

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Chapter2 React基础

§2.1 JSX

2.1.1 JSX简介

JSX是一种用于描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。React致力于通过组件的的概念将页面进行拆分并实现组件复用。于是发明了JSX，作为UI描述和UI数据之间的桥梁。
组件内部可以使用类似HTML的标签描述组件的UI，让UI结构直观清晰，同时因为JSX本质上仍然是JavaScript，所以可以使用更多的JS语法，构建更加复杂的UI结构。

2.1.2 JSX语法

基本语法
JSX的基本语法与XML语法相同，都是使用成对的标签构成一个树状结构的数据。

const element = (
  <div>
    <h1>Hello, world!</h1>
  </div>
)

标签类型
在JSX语法中，使用的标签类型有两种：DOM类型的标签（div、span等）和React组件类型的标签。

// DOM
const element = <h1>Hello, world!</h1>;
// React
const element = <HelloWorld />;
// 嵌套
const element = (
  <div>
    <HelloWolrd />
  </div>;
);

JavaScript表达式
表达式在JSX中的使用场景主要有两个：通过表达式给标签属性赋值、通过表达式定义子组件。

// 通过表达式给标签属性赋值
const element = <MyComponent foo = { 1 + 2 } />
// 通过表达式定义子组件
const items = [ 'item1', 'item2', 'item3' ];
const element = (
  <ul>
    { items.map(message => <Item key = {message} message = {message} />) }
  </ul>
);

JSX中不能使用多行JavaScript语句

// Wrong
const element = <MyComponent foo = {const val = 1 + 2; return val; } />

JSX中可以使用三目运算符、逻辑与（&&）运算符替代if语句

// Correct
let complete;
const element = (
  <div>
    {
      complete ? <CompletedList /> : null
    }
  </div>
);
// Correct
let complete;
const element = (
  <div>
    {
      complete && <CompletedList />
    }
  </div>
);

标签属性
当JSX标签是DOM类型的标签时，对应DOM标签支持的属性JSX也支持，例如id、class、style、onclick等。但是部分属性名称必须有所改变，如：class要写出className，onclick要写成onClick。原因是：class是JavaScript的关键字，所以改成className；React对DOM标签支持的事件重新做了封装，如：

<div id='content' className = 'foo' onClick={ () => {console.log('Hello, React')}} />
// 当JSX标签是React组件类型时，可以任意定义标签的属性名
<User name = 'React' age = '4' address = 'America' >

注释
推荐在JSX中的注释用 “{}” 将 /* */包裹起来。如：

const element = (
  <div>
    {/* 注释 */}
    <span>React</span>
  </div>
);

附：HTML基本介绍

0.1 概览

HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。

0.2 HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <html>。HTML 标签通常是成对出现的，比如 <b> 和 </b>。
标签对中的第一个标签是开始标签，第二个标签是结束标签。开始和结束标签也被称为开放标签和闭合标签。
HTML 文档 = 网页；HTML 文档描述网页；HTML 文档包含 HTML 标签和纯文本。HTML 文档也被称为网页。

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题（Heading）
<p> 与 </p> 之间的文本被显示为段落（paragraph）
<a href=”http://…”>与</a>之间的文本被显示为链接（link）
<img与/>之间的文本被显示为图像（image）

1.1 HTML元素

1.1.1 HTML 元素语法

HTML 元素以开始标签起始，以结束标签终止。
元素的内容是开始标签与结束标签之间的内容。某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）。
大多数 HTML 元素可拥有属性。

1.1.2 HTML元素嵌套

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。HTML 文档由嵌套的 HTML 元素构成。如：

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<p>元素
<p> 元素定义了HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。元素内容是：This is my first paragraph。
<body>元素
<body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。元素内容是另一个 HTML 元素（p 元素）。
<html>元素
<html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。元素内容是另一个 HTML 元素（body 元素）。
1.1.3 空的HTML元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。但在未来版本中，推荐使用<br />。

1.2 HTML属性

1.2.1 概述

属性为 HTML 元素提供附加信息。
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=“value”。属性总是在 HTML 元素的开始标签中规定。

1.2.2 属性的实例

HTML链接
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://sdcs.sysu.edu.cn">This is a link</a>

HTML标题
<h1> 定义标题的开始。<h1 align=“center”> 拥有关于对齐方式的附加信息。

<h1 align="center">This is heading 1</h1>

HTML主体

<body> 定义 HTML 文档的主体。<body bgcolor=“yellow”> 拥有关于背景颜色的附加信息。

<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>

1.2.3 HTML属性的注意点

使用小写的属性
始终为属性值加引号（单引号与双引号皆可，但若属性值本身就含有双引号，则必须使用单引号）
未详尽部分见：https://www.w3school.com.cn/tags/index.asp

1.3 HTML标题

1.3.1 概述

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

1.3.2 HTML水平线

<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

1.3.3 HTML注释

开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。格式为：。

<!-- This is a comment -->

1.4 HTML段落

1.4.1 段落的定义

段落是通过 <p> 标签定义的。浏览器会自动地在段落的前后添加空行。格式为：<p> PARAGRAPH </p>。

1.4.2 段落的折行

如果希望在不产生一个新段落的情况下进行换行（新行），则使用
标签：
<p>This is<br />a para<br />graph with line breaks</p>
提示：对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

1.5 HTML样式（style）

1.5.1 HTML的style属性

style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。
应该避免使用下面这些标签和属性：<center>, <font>, <s>, <u>, align, bgcolor, color。对于以上这些标签和属性应使用样式代替。

1.5.2 HTML样式实例

背景颜色
background-color 属性为元素定义了背景颜色。

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列（font-family）、颜色（color）和字体尺寸（font-size）。

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

注意到定义多个元素需用分号分隔开。
3. 文本对齐
text-align 属性规定了元素中文本的水平对齐方式（text-align）。

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

1.6 HTML文本格式化

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。详见：https://www.w3school.com.cn/html/html_formatting.asp

1.7 HTML CSS（层叠样式表 Cascading Style Sheets）

1.7.1 CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表。

1.7.2 外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

1.7.3 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

1.7.4 内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

1.7.5 标签举例

<style>
定义样式。
<style> 标签用于为 HTML 文档定义样式信息。在 style 中，可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。style 元素位于 head 部分中。
<link>
定义资源引用。
<div>
定义文档中的节或区域（块级）。
如：文档中的一个部分会显示为绿色。

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。