什么是函數式組件？函數式組件就是函數是組件，感覺在玩文字游戲。使用過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-->