What
functional是Vue2.x提供的API，开启可实现函数式组件。
先上官方链接，得到解释：
使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使它们渲染的代价更小
无data，即可理解为无响应式数据。
另外：函数式组件也无生命周期钩子函数。
给template标签添加functional属性，视图无法渲染出传入的Props：
<template functional>
<!-- content无法渲染 -->
<p class="content">{{ content }}</p>
</template>
<script>
export default {
props: {
content: String
}
};
</script>
根据官方的说明，为弥补缺少的this实例，使用render API进行渲染
<script>
export default {
functional: true,
props: {
content: String
},
render: (h, ctx) => {
console.log("this", this); // undefined
console.log("ctx", ctx);
return h("span", ctx.props.content); // content成功渲染
}
};
</script>
render的第一个参数h代表createElement 方法，用于创建虚拟DOM。
注意，接收的第二个参数：ctx，是为函数式组件额外提供的参数，是代表上下文信息的对象，提供了数据传递。
一个FunctionalRenderContext，具体属性如下：详细说明
Why
顾名思义，函数式组件就是一个函数，接受props的传参，接着利用render渲染，最后返回结果。
函数式组件不能视为一个组件（VueComponent），如下：
某父组件既有普通组件（button）又有函数式组件，打印该父组件的 $refs 对象：无函数式组件信息
其渲染生成的是虚拟DOM，可当作一个HTMLElement，可通过$el访问。
结合特点之一：无this。
可得结论：函数式组件减少了组件实例化的过程，相对之下，不需要分配多余的内存，性能得到一定的提升。
How
利用函数式组件来进行组件包装，进而提升性能，初始化速度快。
优化的具体效果，可详见参考链接
Last but not least
补充：在Vue3.x中，函数式组件属于非兼容的功能，提到 2.x 的性能提升可以忽略不计，建议只使用有状态的组件（有状态组件的性能已经提高）
如有不妥，请多指教~
