vue函数式组件

函数式组件特点

• 没有管理任何状态
• 没有监听任何传递给它的状态
• 没有生命周期方法
• 它只是接收一些prop的函数

函数式组件的优点

• 渲染开销低，因为函数式组件只是函数

函数式组件的基本写法

{
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
}

为什么要用函数式组件

速度

因为函数式组件没有状态，所以他们不需要像vue的响应式系统一样需要经过额外的初始化。
函数式组件仍然会对相应的变化做出响应式改变，比如新传入props，但是在组件本身中，它无法知道数据何时发生了更改，因为它不维护自己的状态。
对于大型应用程序，在使用函数式组件之后，你会看到Dom的渲染，更新会有重大改进

什么使用函数式组件

函数式组件可能不适用许多情况。因为毕竟使用javascript框架的目的是构建响应式的应用程序

适用的场景：

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