什么是函數(shù)式組件傍衡？
函數(shù)式組件就是函數(shù)是組件，組件是函數(shù)负蠕，它的特征是沒有內(nèi)部狀態(tài)聪舒、沒有生命周期鉤子函數(shù)、沒有this（不需要實例化的組件）虐急。
在日常開發(fā)中箱残，我們經(jīng)常會開發(fā)一些純展示性的業(yè)務組件，比如一些詳情頁面，列表界面等被辑，它們有一個共同的特點是：
只要你傳入數(shù)據(jù)燎悍，我就進行展現(xiàn)。
不需要有內(nèi)部狀態(tài)盼理，不需要在生命周期鉤子函數(shù)里面做處理谈山。
這時候你就可以用函數(shù)式組件。
本文只以2.6版本為例說明宏怔。
官方文檔
https://cn.vuejs.org/v2/guide/render-function.html#函數(shù)式組件
官方手冊寫的跟屎一樣奏路。網(wǎng)上的大部分相關(guān)教程只是把手冊抄一遍，也跟屎一樣臊诊。所以我要寫下這篇鸽粉。
為什么要用它
函數(shù)式組件不需要實例化，無狀態(tài)抓艳，沒有生命周期触机，所以渲染性能要好于普通組件
函數(shù)式組件結(jié)構(gòu)更簡單，代碼結(jié)構(gòu)更清晰
函數(shù)式組件與普通組件的區(qū)別
函數(shù)式組件需要在聲明組件是指定
functional玷或。函數(shù)式組件不需要實例化儡首，所以沒有
this，this通過render函數(shù)的第二個參數(shù)來代替偏友。函數(shù)式組件沒有生命周期鉤子函數(shù)蔬胯，不能使用計算屬性，
watch等等位他。函數(shù)式組件不能通過
$emit對外暴露事件笔宿，調(diào)用事件只能通過context.listeners.click的方式調(diào)用外部傳入的事件。因為函數(shù)式組件是沒有實例化的棱诱，所以在外部通過
ref去引用組件時，實際引用的是HTMLElement涝动。函數(shù)式組件的
props可以只聲明一部分或者全都不聲明迈勋，所有沒有在props里面聲明的屬性都會被自動隱式解析為prop，而普通組件所有未聲明的屬性都被解析到$attrs里面醋粟，并自動掛載到組件根元素上面(可以通過inheritAttrs屬性禁止)靡菇。
使用場景
上面已經(jīng)反復強調(diào)，凡是不需要實例化米愿，無狀態(tài)厦凤，沒有生命周期的組件，除了props之外沒有別的配置項育苟，都可以改寫成函數(shù)式組件较鼓。
函數(shù)式組件寫法一：模板語法寫法
父組件：
<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>部分。是不是很簡單博烂？
函數(shù)式組件寫法二：JSX寫法
<script>
export default {
functional: true,
props: {
text: {
type: String
}
},
/**
* 渲染函數(shù)
* @param {*} h
* @param {*} context 函數(shù)式組件沒有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函數(shù)中遵守JSX寫法禽篱，
<p>{props.text}</p>畜伐、<p>哈哈嗝</p>是JS一樣的短路關(guān)系，不是代碼疊加關(guān)系躺率。不要給
<p>{props.text}</p>玛界、<p>哈哈嗝</p>加引號！
由于函數(shù)式組件沒有this悼吱，所以props慎框、slots等都在context上面掛著，可以打印一下context看看舆绎。
JSX需要另外的學習成本鲤脏，如果你愿意的話可以搜索相關(guān)資料學習一下。
