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

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

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

機能コンポーネントとは

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

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

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

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

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

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

FunctionalButton.js

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

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

The context あなたが上で見る議論 render この関数は、レンダリングコンテキストとして知られています。これは、次のプロパティを含むオブジェクトです。

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

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

App.vue

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

そうすれば、今では使用することが可能です children ハードコードされた‘Clickme’ の代わりにプロパティ：

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 効果はありません。したがって、なぜ attrs からのプロパティ createElement 引数。レンダリングコンテキストにわずかに異なる構造を与えます。

トリガーイベント

機能コンポーネントにはインスタンスがないという事実を考えると、イベントリスナーはの親から来ます 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]);

まとめ

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

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

getdocs

13036