class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件

作者：Milos Protic
译者：前端小智
来源：medium

---

啥是应用程序状态，为什么咱们需要它？

状态管理通常在较小的项目并不需要，但是当涉及到更大的范围时，如企业级的应用大部分需要它了。简单的说，状态是一个包含应用程序使用的最新值的对象。但是，如果咱们从结构的、更抽象的角度来看待它，就会清楚地看到，状态是复杂应该中重要一块，它使能够构建干净的体系结构，并将关注点强有力地分离开来。

通常，缺乏经验的开发人员无法预测对状态管理的需求，以及如何实现状态管理，因此很难了解状态管理的重要性。如果基于状态的组件堆积起来，它们之间的数据管理和共享将成为一场噩梦。从长远来看，拥有的基于状态的组件越多，出现的问题就越多。

如果没有使用外部包进行状态管理，那么最好尽可能少地使用基于状态的组件，而展示组件则使用围绕它们构建的状态。

Vue 和无状态(函数)组件

Vue 中的无状态组件其实就是函数组件。但函数组件又是啥呢? 要回答这个问题，咱们首先必须理解什么是函数式编程。

与将程序分解为对象的面向对象方法不同，函数式编程鼓励将程序分解为小函数，这些小函数用于形成更高级的程序。我们创建的函数不依赖于或可以改变任何外部状态，这导致另一个观察结果，对于给定的输入，它们总是返回相同的输出。

因此，函数组件是没有状态的组件，并且可以更改它。函数组件输出总是基于给定的输入。在 Vue 方面，这类组件会根据给定的props给出不同的输出。

语法

Vue 提供了一种定义函数组件的简单方法。咱们只需要给个 functional 关键字就可以。在 2.5.0 及以上版本中，如果使用了单文件组件，那么基于模板的函数式组件可以这样声明：：

<template functional>
  <div> 函数/无状态组件 div>
template>

或者

注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的特性都会被自动隐式解析为 prop。

当使用函数式组件时，该引用将会是 HTMLElement，因为他们是无状态的也是无实例的。

需要注意的是，传递给函数组件的惟一数据是props。这些组件是完全无状态的(没有响应数据)&