组件允许你将 UI 拆分为独立可复用的门第代码片段，并对每个片段进行独立构思。步解从概念上类似于 JavaScript 函数。组件

它接受任意的念及入参(即 “props”)，并返回用于描述页面展示内容的应用 React 元素。分为函数组件与 class 类组件。门第

学习组件之前，步解可以先安装一个 VS Code 插件，组件直接搜索 react ,念及 选择下载量最高的就行了。

函数组件与类组件

顾名思义，应用函数组件就是门第使用函数创建的组件，类组件就是步解使用类创建组件，安装好插件之后，亿华云组件可以直接使用简写补全功能创建对应插件。念及

注意，应用首字母要大写。

函数组件的创建

编辑器快捷方式：rfce

import React fromreact functionComponentFun() {    return (     <div>       <h2>单文件函数组件</h2>     </div>   ) } exportdefault ComponentFun 

声明函数，并在函数中返回 JSX ，最后导出函数。

类组件的创建

编辑器快捷方式：rce

import React, {  Component } fromreact exportclass ComponentClass extends Component {    render() {      return (       <div>         <h2>单文件类组件</h2>       </div>     )   } } exportdefault ComponentClass 

类组件需要继承 Component，因此需要进行导入。如果不导入，则需要继承React.Component。

同时，类中需要调用 render() 渲染函数，在渲染函数中，return 返回对应的 JSX。

组件的引入与使用

组件的云服务器提供商使用也很简单，按模块化语法引入之后，直接当作标签在 JSX 中使用。

import React fromreact // 引入单文件组件 import ComponentClass from./ComponentClass import ComponentFun from./ComponentFun functionApp() {    return (     <div>       { /* 使用组件 */}       <ComponentClass/>       <ComponentFun/>     </div>   ) } exportdefault App 

因为 JSX 必须有一个根节点，因此在引入使用后，渲染的结果中，会出现多个 div 嵌套，比如下面这样子的：

<divid="root"><div><div><h2>单文件类组件</h2></div><div><h2>单文件函数组件</h2></div></div></div> 

为了解决这个问题，React 提供了 “片段” 组件 Fragment ，它允许你将子列表分组，渲染后不会向 DOM 添加额外节点：

import React, {  Component,Fragment } fromreact exportclass ComponentClass extends Component {    render() {      return (       <Fragment>         <h2>单文件类组件</h2>       </Fragment>     )   } } exportdefault ComponentClass 

使用也很简单，就是引入后，将 JSX 中的div 根节点替换即可，最终渲染后的 DOM 如下：

<divid="root"><div><h2>单文件类组件</h2><h2>单文件函数组件</h2></div></div> 亿华云计算