组件(react)

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 中一样在最外层包裹一个

以外，React16 中还提供了其他的解决方案 —— Fragment，用来表示不可见的包裹元素。

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>
        </>
    )
}