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

 

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

 

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

 

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

 

Vue 和无状态(函数)组件

 

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

 

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

 

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

 

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我并在后台私信我：前端，即可免费获取。

 

语法

 

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

 

<template functional>

 

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

 

</template>

 

或者

 

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

 

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

 

需要注意的是，传递给函数组件的惟一数据是props。这些组件是完全无状态的(没有响应数据)，它们忽略传递给它们的任何状态，并且不触发任何生命周期方法(created、mounted等等)。

 

而且，咱们也不能通过使用 this 关键字来访问实例，因为这些组件也是不实例化的。相反，组件需要的所有东西都是通过context提供的。在render函数中，它作为createElement方法的第二个参数传递。

 

组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：

 

props：提供所有 prop 的对象

 

children: VNode 子节点的数组

 

slots: 一个函数，返回了包含所有插槽的对象

 

scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。

 

data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件

 

parent：对父组件的引用

 

listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。

 

injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性。

 

为什么咱们需要无状态组件

 

到目前为止，咱们已经了解到函数组件是无状态的，在它们的核心中，它们只是可执行的函数，接受一些输入并根据其提供输出。

 

就它们的用法而言，因为函数式组件只是函数，所以渲染开销也低很多，这也意味着它们是非常高效的，不需要花太多时间渲染。同时，考虑高阶组件，它们不需要任何状态，它们所要做的就是用额外的逻辑或样式包装给定的子组件。

 

接下来，通例事例展示一样啥时使用函数组件，函数组件非常适合此类任务。