React 【组件和 JSX 】编写React元素、创建组件、理解JSX、JSX规则、使用Fragments

目录：

编写 React 元素

打开 index.js，创建一个叫做的 element 的元素，用 h1 标签将先要显示的文字包裹。React 通过 ReactDom.render 方法将虚拟 DOM 加载到实际的浏览器页面上，第一个参数是要渲染的 React 对象，第二个参数是页面的目标位置。

页面表现：

可以看到定义的 React 元素渲染到了页面上

了解 React 元素

将上面例子中的 element 元素打印出来，在浏览器查看。

在控制台查看。可以看到打印出来一个 Object ，React 元素就是一个 JS 对象。Object 里面包含很多属性，可以看到属性 type 的值是 “h1”。属性 props 里面还包含属性 children，属性 children 的值就是刚刚定义的文本内容“Hello React”。

创建组件

组件是构成 React 页面的代码片段，也是 React 最基本的组织界面的一个形式。

在 src 目录下新建一个 components 文件夹，在 components 文件夹下新建 listItem.jsx，建议使用小驼峰命名法对组件进行命名，组件的后缀是 jsx。

定义组件

如果有下载 Simple React Snippets 插件，可以使用 imrc 与 cc 缩写快速创建一个 React 模板。

定义一个 React 组件

引用组件

代码中的 className="container" 作用是获得 bootstrap 默认居中的样式。

代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render( <App />, document.getElementById('root'));

index.js

import React, { Component } from 'react';

class ListItem extends Component {
    render() { 
        return ( <h1>我是小许</h1> );
    }
}
 
export default ListItem;

listItem.jsx

import React from 'react';
import './App.css';
import ListItem from './components/listItem'

function App() {
    return(
        <div className="container">
            <ListItem />
        </div>
    )
}

export default App;

App.js

页面表现：

以上就是一个简单的定义与引用组件的一个流程。

定义组件前的思考

1. 应用位置

　　确定组件在整个应用的位置是什么，在整个树状结构图里面的位置是什么。它需要哪些子组件，它是哪个父组件的子组件，它的兄弟组件有哪些。

2. 确定参数

　　确定组件输入的参数和哪些初始参数复用的场景。

3. 确定类型

　　确定组件的类型，是函数租组件还是 Class 组件。

4. 组件内容

　　思考组件会返回哪些内容。

理解 JSX

JSX 是 JavaScript XML 的缩写。

JSX 是 JavaScript 的语法扩展，使用 XML 标记的方式直接声明界面。

JSX 不是模板引擎语言

　　模板引擎语言有很多，比如 Angular、Vue 框架里带的 template 的语法。JSX 不是模板引擎语言，他是带语法糖的 AST（抽象语法树），语法糖的处理放到了构建的阶段，所以运行的时候不需要解析。

JSX 使用声明式方式创建 UI ，处理 UI 逻辑。

JSX 遵循 JavaScript 语法，无学习门槛。

JSX 背后的理念：

　　React 认为渲染逻辑本质上其实是与其它 UI 在逻辑内部的耦合，比如，在 UI 中通常需要处理事件的绑定，或者在某些时刻需要发生变化要通知 UI，以及需要在 UI 中展示准备好的数据。React 并没有采用将标记与逻辑分离到不同文件这种方式，而是采用将二者共同存放在称之为组件这样一个松散耦合的单元之中。

Babel :

　　实际上，JSX 就是 JavaScript。React 会通过第三方工具将 JSX 转换成浏览器可以运行的 JS 代码。如果通过脚手架搭建 React 本地的开发环境，脚手架中有一个自带的内容 Babel，Babel 可以将 JSX 代码转换为正常可运行的代码。下面演示一下 Babel 是如何将JSX 代码转换为正常可运行的代码的。

访问 babeljs.cn

点击菜单栏中的 “ 试一试 ”，打开 Babel 在线编译的页面

可以看到预设勾选了es2015、stage-2、react，在左边框框输入 JSX 代码，右边框框会输出浏览器可以运行的 JS 代码。

JSX 规则

1. 在 JSX 中嵌入表达式，用 {} 包裹

2. 大写开头作为定义组件，小写 tag 为原生 dom 节点

3. JSX 标签可以有特定属性和子元素

4. JSX 只能有一个根元素

例子

1. 在 JSX 中嵌入表达式，用 {} 包裹

index.js(React入口文件)：

导入 App.js，在页面上渲染 App 组件。

App.js:

注册引用组件 listItem.jsx

listItem.jsx:

粗红框圈起的是用 { } 包裹的表达式，在页面渲染出 product.price 的值

页面表现：

可以进行算数运算，对 listItem.jsx 第 14 行进行修改。

{ product.price+10 }

页面表现：

可以进行三目运算，对 listItem.jsx 第 14 行进行修改。

 { product.price<4 ? "便宜" : "贵" }

页面表现：

还可以在函数内进行运算，将函数的返回值加载到 JSX 中的表达式即可。

页面表现：

使用 Fragment

　　Fragment 是碎片的意思。React Fragment 就是使用 Fragment 标签将子元素包裹在一起，但是渲染在 DOM 节点上的时候没有额外的节点。

为什么使用 Fragment

● 可以包含并列的子元素

● 编写表格组件，包裹子元素让 html 生效

下面举例对比说明为什么要使用 Fragment。

不使用 Fragment 的时候

相邻的 JSX 元素必须被一个闭合标签包裹。

修改上面例子中的 App.js，App.js:

报错：

　　Line 7:9: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.

　　意思是相邻元素必须被包裹在一个闭合标签里。

报错原因：

　　React 通过第三方工具 Babel 将 JSX 的内容转换成浏览器可以识别的 JS 语句，转换使用的方法是 React.createElement() 这个方法，这个方法的第一个参数是需要创建的元素的 type 属性，type 属性只能够填写一个，所以像上面代码一样并列两个元素是不可以的，会让 Babel 转义的时候不知道对哪个元素进行转义

解决方法：用一个 div 标签将相邻的两个 React 元素包裹在一起。

修改代码。App.js:

页面表现：

查看页面结构，可以看到有多余的 div 标签。使用 Fragment 不会生成多余的 DOM 节点。

使用 Fragment 的时候

使用<React.Fragment></React.Fragment>标签。

页面表现：

可以看到少了多余的 div 标签。

Fragment 有便利写法，可以用<></>替代<React.Fragment></React.Fragment>，效果相同。