Vue.jsの機能コンポーネント

機能コンポーネントはReactコミュニティで非常に人気があります。コンテキストを渡すだけで簡単なコンポーネントをきちんと作成できるため、推論が非常に簡単になります。

機能コンポーネントとは

機能コンポーネントは、コンポーネントの世界にもたらされた機能と同等であると考えることができます。とはいえ、これはレンダリングコンテキストを受け取り、レンダリングされたHTMLを返すコンポーネントです。

機能コンポーネントは次のとおりです。

ステートレス：それ自体は状態を保持しません
インスタンスなし：インスタンスがないため、thisはありません

その性質上、そのユースケースの2つは、プレゼンテーションコンポーネントと高次コンポーネントです。

機能コンポーネントの作成

機能コンポーネントを定義するには、functional: trueプロパティとレンダリング関数を使用してオブジェクトを作成する必要があります。 FunctionalButtonコンポーネントの例を作成しましょう。

FunctionalButton.js

export default {
  functional: true,
  render(createElement, context) {
    return createElement('button', 'Click me');
  }
};

レンダリングコンテキスト

render関数に表示されるcontext引数は、レンダリングコンテキストと呼ばれます。これは、次のプロパティを含むオブジェクトです。

props
children
slots：slotオブジェクトを返す関数
parent
listeners
injections
data：以前のすべてのプロパティを含むオブジェクト

試してみましょう。 App.vue コンポーネントがあり、 FunctionalButton.js をインポートして、テンプレートで使用するとします。

App.vue

<template>
  <FunctionalButton>
    Click me
  </FunctionalButton>
</template>

このようにして、ハードコードされた'Clickme'の代わりにchildrenプロパティを使用できるようになりました。

FunctionalButton.js

export default {
  functional: true,
  render(createElement, { children }) {
    return createElement("button", children);
  }
};

小道具を渡す

このコンポーネントをもっと楽しんでみましょう。 disabledプロパティのないボタンとは何ですか？

App.vue

<template>
  <FunctionalButton>
    Click me
  </FunctionalButton>
</template>

FunctionalButton.js

export default {
  functional: true,
  render(createElement, { props, children }) {
    return createElement('button', { attrs: props }, children);
  }
};

ボタンはhtmlタグであり、コンポーネントではないため、propsは効果がないことに注意してください。したがって、createElement引数からattrsプロパティを使用すると、レンダリングコンテキストにわずかに異なる構造が与えられるのはなぜですか。

トリガーイベント

機能コンポーネントにはインスタンスがないという事実を考えると、イベントリスナーはcontext.listenersプロパティの親から取得されます。

そのことを念頭に置いて、次のようにclickイベントを実装できます。

App.vue

<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
    );
  }
};

すべて一緒に

dataにはすべてのcreateElementコンテキストプロパティが含まれているため、FunctionalButtonを次のように書き換えることができます。

FunctionalButton.js

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

コンポーネントに何かを追加するラッパーコンポーネント（ Higher Order Component （HOC）とも呼ばれる）を作成するのがいかに簡単かを考えてください。たとえば、ボタンのテキストの前に"Hello"を追加できます。

createElement('button', data, ['Hello ', ...children]);

まとめ

機能コンポーネントとは何か、そしてそれらがどのような役割を果たしているかを見てきました。ここでは、低レベルの詳細を表示するためにレンダリング関数の構文を使用していますが、今後の記事で機能コンポーネントをレンダリングする他の方法について説明します。

このサンドボックスでこのボタンの例からすべてのコードを見つけてください