Vuejs函數式組件，你值得擁有(1)

函數式組件在React社區很流行使用，那麼在vue裏面咱們要怎麼用呢

下面會涉及到的知識點： 高階函數、狀態、實例、vue組件

什麼是函數式組件

咱們能夠把函數式組件想像成組件裏的一個函數，入參是渲染上下文(render context)，返回值是渲染好的HTML

對於函數式組件，能夠這樣定義：

• Stateless(無狀態)：組件自身是沒有狀態的
• Instanceless(無實例)：組件自身沒有實例，也就是沒有this

因爲函數式組件擁有的這兩個特性，咱們就能夠把它用做高階組件(High order components)，所謂高階，就是能夠生成其它組件的組件。就像日本的高精度的母機。

---

下面示例的完整Demo

那創造一個函數式組件吧

functional: true加上render function，就是一個最簡單的函數式組件啦，show your the code, 下面就建立一個名爲FunctionButton.js的函數式組件

export default {
    name: 'functional-button',
    functional: true,
    render(createElement, context) {
        return createElement('button', 'click me')
    }
}
複製代碼

就像上文所講的，函數式組件沒有this，參數就是靠context來傳遞的了，下面咱們看下context有哪些屬性呢

Render context

• props
• children
• slots (a slots object)
• parent
• listeners
• injections
• data

其中上面的data包含了其餘屬性的引用，nibility。 在下面的範例中會有具體使用

如今建立一個App.vue來引入上面的函數式組件

<template>
    <FunctionalButton>
        click me
    </FunctionButton>
</template>
複製代碼

上面的click me就是FunctionButton.js的childern屬性了，咱們能夠把組件改造下，由App.vue來定義組件的button按鈕

export default {
    name: 'funtional-button',
    functional: true,
    render(createElement, { children }) {
        return createElement('button', children)
    }
}
複製代碼

看，上面用了ES6參數的解構，用{children}來代替context

事件定義

函數式組件沒有實例，事件只能由父組件傳遞。下面咱們在App.vue上定義一個最簡單的click事件

<template>
  <FunctionalButton @click="log">
    Click me
  </FunctionalButton>
</template>
複製代碼

對應的FunctionalButton.js

export default {
  functional: true,
  render(createElement, { props, listeners, children }) {
    return createElement(
      'button',
      {
        attrs: props,
        on: {
          click: listeners.click
        }
      },
      children
    );
  }
};
複製代碼

對了，createElement裏事件屬性就是on了。具體能夠看vue的官方文檔

簡單的寫法

尤大設計的Api仍是很人性的，上面涉及到的props、listeners那麼多要傳遞的，是否是很麻煩，因此尤大統一把這個屬性集成在data裏了，咱們能夠再改寫下

export default {
  functional: true,
  render(createElement, { data, children }) {
    return createElement( 'button', data, children );
  }
};
複製代碼

恩，是否是感受世界清爽了很多

這就是一個完整的高階組件了，下面小小的展現一下高階的魅力。

createElement('button', data, ['hello', ...children])
複製代碼

恩，很簡單的就DIY了一個自帶hello的button按鈕

The end

上面就是關於函數式組件的基礎定義和基本使用了，但願對大家的學習有幫助。

---

打個廣告

公司如今急招前端開發，座標深圳南山，有興趣的能夠看這裏，直接把簡歷發我郵箱吧。teal.yao@corp.to8to.com