React 通过组件的思想,将应用界面拆分成一个个可复用的模块,每一个模块就是一个 React 组件。一个 React 应用由若干组件组合而成,一个组件由若干个 React 元素组合而成,一个复杂组件也可以由若干简单组件组合而成。
组件式开发比模块化开发将应用界面拆分的更细,更高效的提升了代码的复用性。
一、组件的分类
React 中组件可以分为两类:
函数组件:以 JS 中函数的形式设置组件,函数名即为组件名;
类组件:以 ES6 中 class 的形式设置组件,类名即为组件名;
1、创建组件文件
通常我们会为每一个 React 组件单独创建一个文件,文件命名和组件命名需要注意以下规则:
文件名可以和组件名不一致,但是通常建议设置为同一个单词;
组件名必须首字母大写;
文件后缀名可以是 .js 也可以是 .jsx,建议使用 .jsx,语法提示更完整;
2、函数式组件
在一个普通的 JS 函数中,通过 return 关键字返回一个 React 元素。该函数是一个有效的 React 函数式组件:
export default function FunctionComponent() {
return (
<div>
<h1>这是函数组件</h1>
</div>
)
}
通过插件提供的快捷键 rfc 可以自动生成一个函数组件。
3、类组件
类组件是指使用 ES6 中的 class,通过继承 React.Component 来定义组件:
import { Component } from 'react'
export default class ClassComponent extends Component {
render() {
return (
<div>
<h1>这是类组件</h1>
</div>
)
}
}
通过插件提供的快捷键 rcc 可以自动生成一个函数组件。
无论是函数式组件还是类组件,最终组件 return 的都是 React 元素,而 return 的 React 元素本质上则又调用了 React.createElement() 方法。
二、组件嵌套
一个 React 应用会由很多很多的 React 组件构成,所以我们的组件之间还可以进行互相的组合嵌套。
import ClassComponent from './ClassComponent.jsx'
import FunctionComponent from './FunctionComponent'
export default function Father() {
return (
<div>
<FunctionComponent></FunctionComponent>
<ClassComponent></ClassComponent>
</div>
)
}
三、Fragment
React 组件中在通过 return 返回组件模版时,和 Vue 一样要求只能有一个根节点。除了像 Vue 中一样在最外层包裹一个
import { Component, Fragment } from 'react'
export default class ClassComponent extends Component {
render() {
return (
<Fragment>
<h1>这是类组件</h1>
<h1>这是类组件</h1>
</Fragment>
)
}
}
短语法
如果你记不住 Fragment 这个单词,还可以直接用 Fragment 的简写形式 <></>:
export default function FunctionComponent() {
return (
<>
<h1>这是函数组件</h1>
<h1>这是函数组件</h1>
</>
)
}