Vue にとってフックが何を意味するかについて話しましょう

この記事は、フックと vue に関する関連知識を提供します。フックは、V16.7.0-alpha バージョンの React によって導入されました。フックは主に、パターンの再利用のためのより明確なアイデアを提供します。皆さんが助けてくれることを願っています。

フックと Vue のライフサイクル フック (ライフサイクル フック) を混同しないでください。フックは V16.7.0 アルファ バージョンで React によって導入され、数日後の Vue リリースで導入されました。その概念実証バージョン。フックは React によって導入されましたが、フックはあらゆる JavaScript フレームワーク エコシステムにとって貴重かつ重要な構成メカニズムであるため、今日は少し時間をかけてフックの意味について説明します。

フックは主に、パターンの再利用に関するより明確なアイデアを提供します。コンポーネント自体の書き換えを回避し、ステートフル ロジックのさまざまな部分がシームレスに連携できるようにします。

元の質問

Reactに関する限り、問題は次のとおりです。状態の概念を表現する場合、クラスはコンポーネントの最も一般的な形式です。ステートレス関数コンポーネントも非常に人気がありますが、純粋にレンダリングすることしかできないため、その使用はプレゼンテーション タスクに限定されます。

クラス自体にいくつか問題があります。たとえば、React の人気が高まるにつれて、クラスの問題が初心者にとってよくある障害となってきました。 React を理解するには、開発者がクラスについても理解する必要があります。バインドするとコードが冗長になり読みにくくなり、JavaScript の this を理解する必要があります。クラスを使用することによって生じる最適化の障害の一部についても、ここで説明します。

ロジックの再利用に関しては、通常、レンダー プロップや高次コンポーネントなどのパターンを使用します。しかし、これらのパターンを使用すると、同様の「破滅のピラミッド」スタイルの実装地獄に陥る可能性があります。ネストの過剰な使用により、コンポーネントの保守が困難になる可能性があります。このことを考えると、私はダン・アブラモフに酔ったように叫びたくなるが、誰もそんなことは望んでいない。

フックを使用すると、関数呼び出しを使用してコンポーネントのステートフル ロジックを定義できるようになり、これらの問題が解決されます。これらの関数呼び出しは、より構成可能で再利用可能になり、機能コンポーネントを使用しながら状態にアクセスして維持できるようになります。 React がフックをリリースしたとき、大きな興奮がありました。以下に、コードと重複を減らすという点でフックが実証する利点のいくつかを示します。

メンテナンスに関して言えば、シンプルさが重要です。ロジック共有を実現する単一の機能的な方法を提供し、コードの量は少なくなる可能性があります。

なぜ Vue にフックが必要なのでしょうか?

これを読んだ後、あなたは Vue でフックが何を提供するのか疑問に思っているはずです。これは解決する必要のない問題のように思えます。結局のところ、クラスは Vue で使用される主要なパターンではありません。 Vue は必要に応じてステートレスな関数コンポーネントを提供しますが、なぜ関数コンポーネントで状態を保持する必要があるのでしょうか?複数のコンポーネント間で再利用できる同じロジックを組み合わせるためのミックスインがあります。問題は解決された。

私も同じことを考えていましたが、Evan You と話した後、彼は私が見落としていた主要なユースケースを指摘しました。ミックスインは相互に状態を消費して使用することはできませんが、フックはそれが可能です。これは、カプセル化されたロジックをチェーンする必要がある場合、フックを使用できることを意味します。

フックはミックスインの機能を実装しますが、ミックスインによって引き起こされる 2 つの主な問題を回避します。

• 状態を相互に受け渡すことができます。
• ロジックの出所を明確にしてください。

複数のミックスインが使用されている場合、どのミックスインによってどのプロパティが提供されるかが明確ではありません。フックを使用すると、関数の戻り値に消費された値が記録されます。

それでは、これは Vue ではどのように機能するのでしょうか?フックを使用する場合、ロジックは関数呼び出しで表現されるため、再利用可能であると前に説明しました。 Vue では、これは、データ呼び出し、メソッド呼び出し、または計算されたプロパティ呼び出しを別のカスタム関数にカプセル化し、それらを自由に構成できることを意味します。データ、メソッド、計算されたプロパティを機能コンポーネントで使用できるようになりました。

例

フックの構成例に進む前に、構成要素を理解できるように、非常に単純なフックを見てみましょう。

useWat?

OK、Vue フックと React フックの間にはクロスオーバーがあります。プレフィックスとして use を使用するのは React の規則なので、React でフックを探すと、フックの名前が useState、useEffect のようになっていることがわかります。 など詳細については、こちらをご覧ください。

Evan のオンライン デモでは、彼が render 関数の useState と useEffect にアクセスする場所を確認できます。

Vue の render 関数に詳しくない場合は、公式 Web サイトのドキュメントを参照すると役立つかもしれません。

しかし、Vue スタイルのフックを使用する場合、ご想像のとおり、useData、useComputed などの名前をどのように付けますか。

そこで、Vue でフックを使用する方法を説明するために、探索するためのサンプル アプリケーションを作成しました。

src/hooks フォルダー内に、useMounted フックでのスクロールをブロックし、useDestroyed フックでのスクロールを再度有効にするフックを作成しました。これにより、コンテンツを表示するダイアログ ボックスが開いたときにページのスクロールを一時停止し、表示ダイアログ ボックスが終了したときに再度スクロールできるようになります。これは、アプリケーション全体で複数回使用される可能性があるため、優れた抽象化です。

import { useDestroyed, useMounted } from "vue-hooks";export function preventscroll() {
  const preventDefault = (e) => {
    e = e || window.event;    if (e.preventDefault)
      e.preventDefault();
    e.returnValue = false;
  }

  // keycodes for left, up, right, down
  const keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  const preventDefaultForScrollKeys = (e) => {    if (keys[e.keyCode]) {
      preventDefault(e);      return false;
    }
  }

  useMounted(() => {    if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
    window.onwheel = preventDefault; // modern standard
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
    window.touchmove = preventDefault; // mobile
    window.touchstart = preventDefault; // mobile
    document.onkeydown = preventDefaultForScrollKeys;
  });

  useDestroyed(() => {    if (window.removeEventListener)
      window.removeEventListener('DOMMouseScroll', preventDefault, false);

    //firefox
    window.addEventListener('DOMMouseScroll', (e) => {
      e.stopPropagation();
    }, true);

    window.onmousewheel = document.onmousewheel = null;
    window.onwheel = null;
    window.touchmove = null;
    window.touchstart = null;
    document.onkeydown = null;
  });
}

その後、AppDetails.vue のような Vue コンポーネントで呼び出すことができます。

<script>
import { preventscroll } from "./../hooks/preventscroll.js";
...export default {
  ...  hooks() {
    preventscroll();
  }
}
</script>

このコンポーネントで使用できるだけでなく、アプリケーション関数全体で同じものを使用することもできます。

相互理解する 2 つのフック

フックとミックスインの主な違いの 1 つは、フックが実際に相互に値を渡すことができることであると前に述べました。この単純だがやや不自然な例を見てみましょう。

私たちのアプリケーションでは、再利用可能なフックで計算を実行し、その計算の結果を使用する必要があるものが必要です。この例では、ウィンドウの幅を取得してアニメーションに渡すフックがあり、より大きな画面を使用している場合にのみアニメーションが起動することが認識されます。

詳細については、ビデオのデモを参照してください: css-tricks.com/wp-content/…

最初のフック:

import { useData, useMounted } from 'vue-hooks';export function windowwidth() {
  const data = useData({
    width: 0
  })

  useMounted(() => {
    data.width = window.innerWidth
  })

  // this is something we can consume with the other hook  return {
    data
  }
}

次に、2 番目のフックで、これを使用します。アニメーション ロジックをトリガーする条件を作成するには:

// the data comes from the other hookexport function logolettering(data) {
  useMounted(function () {
    // this is the width that we stored in data from the previous hook    if (data.data.width > 1200) {
      // we can use refs if they are called in the useMounted hook
      const logoname = this.$refs.logoname;
      Splitting({ target: logoname, by: "chars" });

      TweenMax.staggerFromTo(".char", 5,
        {
          opacity: 0,
          transformOrigin: "50% 50% -30px",
          cycle: {
            color: ["red", "purple", "teal"],
            rotationY(i) {              return i * 50
            }
          }
        },
        ...

次に、コンポーネント内で、1 つのフックをパラメータとして別のフックに渡します:

<script>
import { logolettering } from "./../hooks/logolettering.js";
import { windowwidth } from "./../hooks/windowwidth.js";export default {  hooks() {
    logolettering(windowwidth());
  }
};
</script>

これで、これをアプリケーション全体で使用できるようになります。ロジックを書くためのフック!繰り返しになりますが、これはデモンストレーションを目的とした不自然な例ですが、ロジックをより小さな再利用可能な関数に保持することで、これが大規模なアプリケーションでどのように効果的であるかがわかります

#[関連する推奨事項: "

vue.js チュートリアル"]

以上がVue にとってフックが何を意味するかについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。