为什么是函数组件？
函数组件和类组件是两种不同的组件类型。
以前，React 开发者创建组件的首选是类组件，因为函数组件是无状态的，一个无状态的组件基本只能用来做纯展示。
但是，React 16.8 引入了特性 Hooks，它赋予了函数组件管理内部状态的能力。
声明式/命令式 UI
如果你使用过 jQuery，你会很容易理解什么是命令式 UI。如果你没用过也没关系，
简单来说命令式 UI 就是你需要执行具体的代码指令来操作 UI。
比如我想渲染一个这样的结构在页面上：
<div class="container">
<p>hello, world</p>
</div>需要通过代码执行以下步骤：
- 创建一个
div - 设置
div的class为"container" - 创建一个
p - 设置
p的内容为"hello, world" - 把
p放到div里 - 把
div放到body里
你是不是发现了，这样的代码很难维护？因为你需要关心每一个细节，代码量非常大，一但修改 UI，你需要修改很多地方，非常容易出错。
现代前端 UI 库就是为了解决这个问题而生的。React、Vue 都是声明式 UI 库。
看这个公式：
UI = F(state)
这个公式非常重要，它直接体现了声明式 UI 的本质。即数据驱动 UI。 此时你只需要关注数据的处理，UI 会根据数据的变化自动更新。
组件的本质
再次看这个公式：
UI = F(state)
其中 F 是函数，state 是状态。
如果你把组件带入到 F 中，就会发现组件的本质就是函数。
组件状态除了内部 state 还有外部传入的 props，状态改变 UI 则重新渲染。
因此组件可以看成这样 UI = F(state, props)。
即然组件的本质是函数，那么我们为什么不直接使用函数来声明组件呢？
文章开篇提到了，函数组件在 Hooks 特性出现之前无法管理状态，但是 Hooks 的出现改变了这一切。 并且 Hooks 还为函数组件带来了更加强大的能力。
此时你已经不需要再写类组件了，函数组件可以实现类组件的所有功能。
函数组件的优势
如果你使用过类组件你会发现：
- 逻辑的执行会分散在不同的生命周期里，尽管这些逻辑是相关的。
- 你需要时刻警惕
this指向的变化导致的渲染问题，因为this的指向是不确定的。 - 由于类组件的格式要求，你需要写很多模板代码。
这些问题在函数组件中都得到了解决：
函数组件的格式非常简洁，没有 this，没有生命周期，没有模板代码。并且由于函数组件是纯函数，更容易测试。
最重要的是，使用 Hooks，逻辑更加集中，更容易复用。