函数式组件,函数是组件?
什么是函数式组件?函数式组件就是函数是组件,感觉在玩文字游戏。使用过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-->