原文：https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713

要义：如果你的组件不需要状态化，将其转换为一个 函数式组件（functional component） 可提高 70% 的渲染性能

What - 何为函数式组件？

functional component (别跟 Vue 的 render function 搞混) 是一个不持有状态也没有实例的组件。

说白了，这就意味着这种组件不支持反应式，并且不能用 this 关键字引用到自身。

基于模板的函数式组件

基于 render 函数的函数式组件

访问组件属性

你肯定会疑惑，离开了状态或实例，怎么引用诸如 data 或 methods 等东西。幸运的是，Vue 在 render() 中提供了一个 context 参数，该参数是一个有下列属性的对象：

• props：提供所有 prop 的对象
• children：VNode 子节点的数组
• slots：一个函数，返回了包含所有插槽的对象
• scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用
• listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

访问这个 context 参数相当简单。举例来说，如果想获得属性，这样就可以：

在模板中访问上下文

在 render 函数中访问上下文

📌 函数式组件和属性：

在一个函数式组件中，实际上你不用再显式声明一遍可接收的 props（译注：大于 2.3.0 版本）。然而，一旦你显式声明了 props，这些属性就将依此校验。我个人仍推崇这样做，这样就能指定其类型、required、默认值，或自定义校验器等。

Why - 函数式组件为何有趣？

函数式组件让对组件的访问有点麻烦了，也带来了一些复杂性，那还为什么要自找麻烦呢？

快！

因为函数式组件没有状态，也就不需要针对 Vue 反应式系统等额外的初始化了。

虽然仍会对新传入的 props 等做出反应，但对于组件自身，并不知晓其数据何时改变，因为其并不维护自己的状态。

对于指标爱好者，我也做了一个性能测试：分别用状态化组件和函数式组件渲染 1000 条长的列表，两者用时分别是 140ms 及 40ms 。

When - 何时该用函数式组件？

函数式组件也不是万金油。说到底，使用一个 JavaScript 框架来构建应用图的不就是更好的反应性嘛。在这一点上对于 Vue 来说，其反应式系统仍是不可替代的。

然而仍有一些函数式组件能大展拳脚的用例：

• 显式逻辑特别简单的组件，也叫“哑(dumb)”组件。比如按钮、卡片、标签甚至纯静态的“关于”页面等。
• 一个被用来包裹模板置标或丰富其他组件基础功能的高阶组件。
• 每当你发现自己陷入了一个循环渲染 (v-for)，其遍历对象往往就适用函数式组件

派生值

在特别的场景中，我还是发现了一个小问题。当使用 <template> 标签，并且从 props 中访问一个数据时，有时需要在模板中渲染加工过的数据。

使用标准的 Vue 组件时，用 methods 也好 computed 也罢，这都易如反掌。但对于函数式组件，这两个是不可用的。

也不是没有辙。

就拿经典的 fullName 例子来说，在一个函数式 <template> 中，可以通过直接在组件定义中提供一个方法，并在之后使用 Vue 提供的 $options 属性来调用我们自定义的方法，以达到目的：

函数式组件中的“计算属性”

其他问题

社区中有人发现，当嵌套有着 scoped slots 的函数式组件时，表现并不正常 https://github.com/vuejs/vue-loader/issues/1136

总结

如果你关注性能，或正在开发大型应用，可以考虑使用函数式组件。微不足道的学习曲线将带来巨大的性能收益。

扩展阅读

• [译] React 中的受控组件和非受控组件
• [译] React 中的 dumb 组件和 smart 组件
• [译] 深入 React 高阶组件

--End--

查看更多前端好文
请搜索 fewelife 关注公众号

转载请注明出处