什么是函数式组件？函数式组件就是函数是组件，感觉在玩文字游戏。使用过React的同学，应该不会对函数式组件感到陌生。函数式组件，我们可以理解为没有内部状态，没有生命周期钩子函数，没有this(不需要实例化的组件)。
在日常写bug的过程中，经常会开发一些纯展示性的业务组件，比如一些详情页面，列表界面等，它们有一个共同的特点是只需要将外部传入的数据进行展现，不需要有内部状态，不需要在生命周期钩子函数里面做处理，这时候你就可以考虑使用函数式组件。
先来一个函数式组件的代码
export default { // 通过配置functional属性指定组件为函数式组件 functional: true, // 组件接收的外部属性 props: { avatar: { type: String } }, /** * 渲染函数 * @param {*} h * @param {*} context 函数式组件没有this, props, slots等都在context上面挂着 */ render(h, context) { const { props } = context if (props.avatar) { return <img src={props.avatar}></img> } return <img src="default-avatar.png"></img> } }
在上例中，我们定义了一个头像组件，如果外部传入头像，则显示传入的头像，否则显示默认头像。上面的代码中大家看到有一个render函数，这个是Vue使用JSX的写法，关于JSX,小编将在后续文章中会出详细的使用教程。
为什么使用函数式组件
- 最主要最关键的原因是函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件
- 函数式组件结构比较简单，代码结构更清晰
函数式组件与普通组件的区别
- 函数式组件需要在声明组件是指定functional
- 函数式组件不需要实例化，所以没有
this,this通过render函数的第二个参数来代替 - 函数式组件没有生命周期钩子函数，不能使用计算属性，watch等等
- 函数式组件不能通过$emit对外暴露事件，调用事件只能通过
context.listeners.click的方式调用外部传入的事件 - 因为函数式组件是没有实例化的，所以在外部通过
ref去引用组件时，实际引用的是HTMLElement - 函数式组件的
props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop,而普通组件所有未声明的属性都被解析到$attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止)
我不想用JSX，能用函数式组件吗？
在Vue2.5之前，使用函数式组件只能通过JSX的方式，在之后，可以通过模板语法来生命函数式组件
<!--在template 上面添加 functional属性--> <template functional> <img :src="props.avatar ? props.avatar : 'default-avatar.png'" /> </template> <!--根据上一节第六条，可以省略声明props-->