一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。
组件的概念
我接触到的前端框架react和vue都采用的是组件化编程，那么什么是组件呢？
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。我们可以将 UI 拆分为许多独立可复用的代码片段，并对每个片段进行独立构思，以便提高组件的复用性，优化代码。不仅如此，这还有利于团队分工，每个人负责自己的一部分组件，还可以将繁杂的代码分块，优化代码结构。
在React中有两种组件:类组件和函数组件，下面来讲讲这两种组件。
类组件
通过ES6中类的语法来编写组件，该类必须要 extends React.Component，由此完成类组件的创建；
示例
import React from 'react'
class MyComponents extends React.Component {
render() {
return <h1>Hello Word！</h1>;
}
}
// 导出组件
export default MyComponents
特点
- 类名称必须以大写字母开头
- 类组件需要继承React.Component类(从而使用该父类中的方法或属性).
- 类组件必须提供render()方法
- render()方法必须有返回值,表示该组件的结构.
- 在类组件中必须要有constructor()函数，用于定义组件内部变量，默认创建一个空的构造函数，该函数接收参数(props)。想要访问父组件传递过来的参数，可通过this.props的方式去访问；
- 类组件中有生命周期钩子函数，可以在特定的钩子函数中执行特殊操作；例如接口请求、事件监听和绑定定时器等通常放到componentDidMount()钩子函数中，此时组件已经挂载，DOM树也构建完毕。而移除事件监听和清除定时器要放到componentWillUnmount()钩子函数中，避免发生内存泄露。
- 在类组件中有state状态存储，当要改变变量值时通过setState()更改；
- 类组件的性能消耗比较大，需要创建类组件的实例，且不能销毁
函数组件
通过编写函数的形式来创建组件，将编写完成的组件通过return出去，定义函数组件时定义props形参，使用时props就可以接收到自定义的属性值。
示例
function Hello(){
return ( <div>这是函数式组件</div> )
}
// 或者 箭头函数
const Hello = () => <div>这是函数式组件</div>
// 导出组件
export {Hello}
特点
- 函数组件中是没有this的，通过props传递过来的数据是不变的，同时也没有生命周期钩子函数；
- 函数组件在Hook没出来之前是无状态的，在React16后增加了Hook来保存数据状态；
- 函数式组件性能消耗小，不需要创建实例，渲染的时候就执行一下，得到返回的 react 元素后就直接把中间量全部都销毁。
总结
函数组件语法更短、更简单，这使得它更容易开发、理解和测试。相对于类组件来说，它没有this指向，使用起来就会更加简洁。虽然函数组件中没有了生命周期但是可以使用hook来实现生命周期的功能。
对于我，我一开始学习的react的时候就是使用类组件的，经常会使用state状态和生命周期，我觉得它们很好用。只是每次修改状态都需要使用setState，以及在函数里面时，this的指向有时需要使用this=that（设置一个指向承接）的方式来获得正确的指向。对于hook还没有很熟悉的时候，让我使用函数组件还会有一些不顺手。
但是，不得不说，函数组件确实会比较简洁方便，好操作。
