组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。从概念上类似于 JavaScript 函数。
它接受任意的入参(即 “props”)，并返回用于描述页面展示内容的 React 元素。分为函数组件与 class 类组件。
学习组件之前，可以先安装一个 VS Code 插件，直接搜索 react , 选择下载量最高的就行了。
函数组件与类组件
顾名思义，函数组件就是使用函数创建的组件，类组件就是使用类创建组件，安装好插件之后，可以直接使用简写补全功能创建对应插件。
注意，首字母要大写。
函数组件的创建
编辑器快捷方式：rfce
import React from'react'
functionComponentFun() {
return (
<div>
<h2>单文件函数组件</h2>
</div>
)
}
exportdefault ComponentFun
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
声明函数，并在函数中返回 JSX ，最后导出函数。
类组件的创建
编辑器快捷方式：rce
import React, { Component } from'react'
exportclass ComponentClass extends Component {
render() {
return (
<div>
<h2>单文件类组件</h2>
</div>
)
}
}
exportdefault ComponentClass
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
类组件需要继承 Component，因此需要进行导入。如果不导入，则需要继承React.Component。
同时，类中需要调用 render() 渲染函数，在渲染函数中，return 返回对应的 JSX。
组件的引入与使用
组件的使用也很简单，按模块化语法引入之后，直接当作标签在 JSX 中使用。
import React from'react'
// 引入单文件组件
import ComponentClass from'./ComponentClass'
import ComponentFun from'./ComponentFun'
functionApp() {
return (
<div>
{/* 使用组件 */}
<ComponentClass/>
<ComponentFun/>
</div>
)
}
exportdefault App
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
因为 JSX 必须有一个根节点，因此在引入使用后，渲染的结果中，会出现多个 div 嵌套，比如下面这样子的：
<divid="root"><div><div><h2>单文件类组件</h2></div><div><h2>单文件函数组件</h2></div></div></div>
- 1.
<divid="root"><div><div><h2>单文件类组件</h2></div><div><h2>单文件函数组件</h2></div></div></div>
- 1.
为了解决这个问题，React 提供了 “片段” 组件 Fragment ，它允许你将子列表分组，渲染后不会向 DOM 添加额外节点：
import React, { Component,Fragment } from'react'
exportclass ComponentClass extends Component {
render() {
return (
<Fragment>
<h2>单文件类组件</h2>
</Fragment>
)
}
}
exportdefault ComponentClass
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
使用也很简单，就是引入后，将 JSX 中的div 根节点替换即可，最终渲染后的 DOM 如下：
<divid="root"><div><h2>单文件类组件</h2><h2>单文件函数组件</h2></div></div>
- 1.