05-简单介绍组件

React组件

当前前端开发中是有组件化开发的思想的，在React中组件也是核心之一，这里简单介绍一下React中的组件。

这是官网上对于React组件的定义：

1.组件的定义

1.1 类组件

我们可以直接继承Component类来完成一个组件的定义

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: "我是一段message",
        }
    }

    render() {
        return (
            <div>
                <span>{this.state.message}</span>
            </div>
        )
    }
}

这就是我们之前写的代码，其实它就是组件，我们可以在其他地方对它进行复用；

1.2 函数式组件

函数式组件就定义比较简单了

export default function App() {
    return (
        <div>我是一个函数式组件</div>
    )
}

有了组件这种方式，代码的复用性就能得到提高

2. 组件的生命周期

每一个组件在运行的时候，都会存在自己的生命周期，每一个生命周期做特定的事情；

这是官方网站上的一副图

上图中展示了大多数的生命周期，一些不常用的的生命周期可以到官网上查询（注意版本）。

React组件的生命周期主要分为三大部分挂载（mount），跟新（update），卸载（unmount）；

挂载：指的是React组件才被创建出来。

生命周期图谱：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/