原文：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
总结
如果你关注性能，或正在开发大型应用，可以考虑使用函数式组件。微不足道的学习曲线将带来巨大的性能收益。
扩展阅读
--End--
查看更多前端好文
请搜索 fewelife 关注公众号
转载请注明出处
扫一扫
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
