Vue 函数式组件，如何使用? 为什么要用？什么时候用？

https://juejin.cn/post/6844903887787278349

什么是函数式组件

组件没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法时，可以将组件标记为functional ，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。

如何使用

src\components\render\heading-functional.vue

<script>
export default {
    
    
  functional: true, // 函数式组件
  props: ["level", "title"],
  // heading组件
  // <heading :level="1" :title="title" icon="cart">{
    
    {title}}</heading>
  // <h2 title=""></h2>
  render(h, context) {
    
    
    // 子节点数组
    let children = [];
    // 没有this,同样也没有$slot.default
    // 默认插槽，默认子元素的写法有所更改
    children = children.concat(context.children);

    const {
    
     title, level } = context.props;
    return h(
      "h" + level, // 参数1，tagname
      {
    
     attrs: {
    
     title } }, // 参数2：{。。。}
      children // 虚拟子节点VNode不能再使用$slot.default
    );
  },
};
</script>

<style lang="scss" scoped>
</style>

src\view\test\test2.vue

<template>
  <div>
    <h2>函数式组件</h2>
    <heading-functional :level="3" title="函数式组件">
      这是一个函数式组件
    </heading-functional>
  </div>
</template>

<script>
import HeadingFunctional from "../../components/render/heading-functional.vue";
export default {
  components: { HeadingFunctional },
};
</script>

<style lang="scss" scoped>
</style>

效果：

为什么要使用函数式组件

函数式组件可能会给我们使用组件带来更多的复杂性，但为什么还是需要呢？

速度

因为函数式组件没有状态，所以它们不需要像Vue的响应式系统一样需要经过额外的初始化。

函数式组件仍然会对相应的变化做出响应式改变，比如新传入新的 props，但是在组件本身中，它无法知道数据何时发生了更改，因为它不维护自己的状态。

对于那些喜欢看数字说话的人，该博主做了一个基准测试，渲染1000个列表，有状态组件和函数式组件，有状态组件耗时140ms，函数式组件耗时40ms。

对于大型应用程序，在使用函数式组件之后，你会看到DOM的渲染、更新会有重大改进。

什么时候使用函数式组件

函数式组件可能不适用于许多情况。毕竟，使用 JavaScript 框架的目的是构建响应式的应用程序。在 Vue 中，如果没有响应式，就无法做到这一点。

然而，有些场景就很适合函数式组件的使用：

• 一个简单的展示组件，也就是所谓的 dumb 组件。例如， buttons, pills, tags, cards，甚至整个页面都是静态文本，比如 About 页面。
• “高阶组件”——用于接收一个组件作为参数，返回一个被包装过的组件
• v-for 循环中的每项通常都是很好的候选项