什么是函数式组件？

函数式组件就是函数是组件，组件是函数，它的特征是没有内部状态、没有生命周期钩子函数、没有this（不需要实例化的组件）。

在日常开发中，我们经常会开发一些纯展示性的业务组件，比如一些详情页面，列表界面等，它们有一个共同的特点是：

只要你传入数据，我就进行展现。
不需要有内部状态，不需要在生命周期钩子函数里面做处理。

这时候你就可以用函数式组件。

本文只以2.6版本为例说明。

官方文档

https://cn.vuejs.org/v2/guide/render-function.html#函数式组件

官方手册写的跟屎一样。网上的大部分相关教程只是把手册抄一遍，也跟屎一样。所以我要写下这篇。

为什么要用它

函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件
函数式组件结构更简单，代码结构更清晰

函数式组件与普通组件的区别

函数式组件需要在声明组件是指定functional。
函数式组件不需要实例化，所以没有this，this通过render函数的第二个参数来代替。
函数式组件没有生命周期钩子函数，不能使用计算属性，watch等等。
函数式组件不能通过$emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件。
因为函数式组件是没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement。
函数式组件的props可以只声明一部分或者全都不声明，所有没有在props里面声明的属性都会被自动隐式解析为prop，而普通组件所有未声明的属性都被解析到$attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止)。

使用场景

上面已经反复强调，凡是不需要实例化，无状态，没有生命周期的组件，除了props之外没有别的配置项，都可以改写成函数式组件。

函数式组件写法一：模板语法写法

父组件：

<template>
  <div>
    <func text="aaaaaaaa" />
  </div>
</template>
<script>
import func from '@/components/func.vue';
export default {
  components: {
    func
  }
};
</script>

func.vue：

<template functional>
  <p>{{props.text ? props.text : '哈哈'}}</p>
</template>

注意，没有<script>...</script>部分。是不是很简单？

函数式组件写法二：JSX写法

<script>
export default {
  functional: true,
  props: {
    text: {
      type: String
    }
  },
  /**
   * 渲染函数
   * @param {*} h
   * @param {*} context 函数式组件没有this, props, slots等都在context上面挂着
   */
  render(h, context) {
    console.log(context);
    const { props } = context
    if (props.text) {
      return <p>{props.text}</p>
    }
    return <p>哈哈嗝</p>
  }
}
</script>

注意事项：

无需写<template functional>...</template>部分，直接缺省。
render函数中遵守JSX写法，<p>{props.text}</p>、<p>哈哈嗝</p>是JS一样的短路关系，不是代码叠加关系。
不要给<p>{props.text}</p>、<p>哈哈嗝</p>加引号！

由于函数式组件没有this，所以props、slots等都在context上面挂着，可以打印一下context看看。

JSX需要另外的学习成本，如果你愿意的话可以搜索相关资料学习一下。

Vue.js 2函数式组件学习