Parlons de ce que Hooks signifie pour Vue

Cet article vous apporte des connaissances pertinentes sur les Hooks et la vue. Les Hooks ont été introduits par React dans la version V16.7.0-alpha. Les Hooks fournissent principalement une idée plus claire de la réutilisation des modèles. J'espère que cela aidera tout le monde.

Ne confondez pas les Hooks avec les Hooks de cycle de vie de Vue. Les Hooks ont été introduits par React dans la version V16.7.0-alpha, et Vue a publié sa version de preuve de concept quelques jours plus tard. Bien que les Hooks aient été introduits par React, ils constituent un mécanisme de composition précieux et important pour chaque écosystème de framework JavaScript, nous allons donc passer un peu de temps aujourd'hui à discuter de ce que signifient les Hooks.

Les hooks fournissent principalement une idée plus claire de la réutilisation des modèles - en évitant de réécrire le composant lui-même et en permettant aux différentes parties de la logique avec état de fonctionner ensemble de manière transparente.

Question originale

En ce qui concerne React, le problème est le suivant : les classes sont la forme de composants la plus courante lorsqu'il s'agit d'exprimer le concept d'état. Les composants fonctionnels sans état sont également très populaires, mais comme ils ne peuvent être rendus que purement, leur utilisation est limitée aux tâches de présentation.

Il y a quelques problèmes avec le cours lui-même. Par exemple, à mesure que React est devenu de plus en plus populaire, la question des classes est devenue une pierre d'achoppement courante pour les débutants. Afin de comprendre React, les développeurs doivent également comprendre les classes. La liaison rend le code verbeux et moins lisible, et nécessite de comprendre this en JavaScript. Certains des obstacles à l'optimisation présentés par l'utilisation de classes sont également abordés ici. this。这里还讨论了使用类所带来的一些优化障碍。

在逻辑复用方面，我们通常使用 render props 和高阶组件等模式。但使用这些模式后会发现自己处于类似的“厄运金字塔”中 —— 样式实现地狱，即过度使用嵌套可能会导致组件难以维护。这导致我想对 Dan Abramov 像喝醉了一样大吼大叫，没有人想要那样。

Hooks 允许我们使用函数调用来定义组件的有状态逻辑，从而解决这些问题。这些函数调用变得更具有组合性、可复用性，并且允许我们在使用函数式组件的同时能够访问和维护状态。React 发布 Hooks 时，人们很兴奋 —— 下面你可以看到 Hooks 展示的一些优势，关于它们如何减少代码和重复：

在维护方面，简单性是关键，Hooks 提供了一种单一的、函数式的方式来实现逻辑共享，并且可能代码量更小。

为什么 Vue 中需要 Hooks？

读到这里你肯定想知道 Hooks 在 Vue 中必须提供什么。这似乎是一个不需要解决的问题。毕竟，类并不是 Vue 主要使用的模式。Vue 提供无状态函数式组件（如果需要它们），但为什么我们需要在函数式组件中携带状态呢？我们有 mixins 用于组合可以在多个组件复用的相同逻辑。问题解决了。

我想到了同样的事情，但在与 Evan You 交谈后，他指出了我忽略的一个主要用例：mixins 不能相互消费和使用状态，但 Hooks 可以。这意味着如果我们需要链式封装逻辑，可以使用 Hooks。

Hooks 实现了 mixins 的功能，但避免了 mixins 带来的两个主要问题：

• 允许相互传递状态。
• 明确指出逻辑来自哪里。

如果使用多个 mixins，我们不清楚哪个属性是由哪个 mixins 提供的。使用 Hooks，函数的返回值会记录消费的值。

那么，这在 Vue 中如何运行呢？我们之前提到过，在使用 Hooks 时，逻辑在函数调用时表达从而可复用。在 Vue 中，这意味着我们可以将数据调用、方法调用或计算属性调用封装到另一个自定义函数中，并使它们可以自由组合。数据、方法和计算属性现在可用于函数式组件了。

例子

让我们来看一个非常简单的 hook，以便我们在继续学习 Hooks 中的组合例子之前理解构建块。

useWat?

好的，Vue Hooks 和 React Hooks 之间存在交叉部分。使用 use 作为前缀是 React 的约定，所以如果你在 React 中查找 Hooks，你会发现 Hooks 的名称都会像 useState、useEffect 等。更多信息可以查看这里。

在 Evan 的在线 demo 里，你可以看到他在何处访问 useState 和 useEffect 并用于 render 函数。

如果你不熟悉 Vue 中的 render 函数，那么看一看官网文档可能会有所帮助。

但是当我们使用 Vue 风格的 Hooks 时，我们会如何命名呢 —— 你猜对了 —— 比如：useData，useComputed

En termes de réutilisation logique, nous utilisons généralement des modèles tels que des accessoires de rendu et des composants d'ordre supérieur. Mais l’utilisation de ces modèles peut vous retrouver dans une « pyramide du malheur » similaire – un enfer de mise en œuvre de style, où une utilisation excessive de l’imbrication peut conduire à des composants difficiles à maintenir. Cela m'amène à vouloir crier après Dan Abramov comme s'il était ivre, et personne ne veut ça.

Les hooks résolvent ces problèmes en nous permettant de définir une logique avec état pour les composants à l'aide d'appels de fonction. Ces appels de fonction deviennent plus composables, réutilisables et nous permettent d'accéder et de maintenir l'état tout en utilisant des composants fonctionnels. Lorsque React a publié Hooks, les gens étaient enthousiasmés. Vous pouvez voir ci-dessous certains des avantages démontrés par Hooks, en termes de réduction du code et de la duplication : 🎜🎜La simplicité est la clé en matière de maintenance, et Hooks fournit un moyen unique et fonctionnel de réaliser le partage logique, et la taille du code peut être plus petite. 🎜🎜Pourquoi les Hooks sont-ils nécessaires dans Vue ? 🎜🎜En lisant ceci, vous devez vous demander ce que Hooks a à offrir dans Vue. Cela semble être un problème qui n’a pas besoin d’être résolu. Après tout, les classes ne sont pas le modèle principal utilisé par Vue. Vue fournit des composants fonctionnels sans état si vous en avez besoin, mais pourquoi avons-nous besoin de transporter l'état dans les composants fonctionnels ? Nous avons des mixins pour combiner la même logique qui peut être réutilisée sur plusieurs composants. Problème résolu. 🎜🎜Je pensais à la même chose, mais après avoir parlé à Evan You, il a souligné un cas d'utilisation majeur que j'ai négligé : les mixins ne peuvent pas consommer et utiliser l'état les uns des autres, mais les Hooks le peuvent. Cela signifie que si nous devons chaîner une logique encapsulée, nous pouvons utiliser des Hooks. 🎜🎜Les hooks implémentent la fonctionnalité des mixins, mais évitent les deux principaux problèmes causés par les mixins : 🎜

• Autoriser la transmission des états les uns aux autres.
• Expliquez clairement d'où vient la logique.

🎜Si plusieurs mixins sont utilisés, il n'est pas clair quelle propriété est fournie par quels mixins. À l'aide de Hooks, la valeur de retour de la fonction enregistre la valeur consommée. 🎜🎜Alors, comment cela fonctionne-t-il dans Vue ? Nous avons mentionné précédemment que lors de l'utilisation de Hooks, la logique est exprimée en appels de fonction et donc réutilisable. Dans Vue, cela signifie que nous pouvons encapsuler un appel de données, un appel de méthode ou un appel de propriété calculée dans une autre fonction personnalisée et les rendre librement composables. Les données, méthodes et propriétés calculées sont désormais disponibles pour les composants fonctionnels. 🎜🎜Exemple🎜🎜Regardons un hook très simple pour comprendre les éléments de base avant de passer aux exemples de composition dans Hooks. 🎜

useWat ?

🎜D'accord, il existe un croisement entre Vue Hooks et React Hooks. C'est une convention de React d'utiliser use comme préfixe, donc si vous recherchez des Hooks dans React, vous constaterez que les noms des Hooks seront comme useState, useEffect attendez. Plus d’informations peuvent être trouvées ici. 🎜🎜Dans la démo en ligne d'Evan, vous pouvez voir où il accède à useState et useEffect pour la fonction de rendu. 🎜🎜Si vous n'êtes pas familier avec la fonction de rendu de Vue, il peut être utile de jeter un œil à la documentation du site officiel. 🎜🎜Mais lorsque nous utilisons des Hooks de style Vue, comment allons-nous les nommer - vous l'aurez deviné - tels que : useData, useComputed, etc. 🎜🎜Donc, pour que nous puissions voir comment utiliser Hooks dans Vue, j'ai créé un exemple d'application que nous pouvons explorer. 🎜

Dans le dossier src/hooks, j'ai créé un hook qui réactive le défilement sur useMounted hook 上阻止了滚动，并在 useDestroyed. Cela m'aide à suspendre le défilement des pages lorsque la boîte de dialogue d'affichage du contenu est ouverte et permet de faire défiler à nouveau lorsque la boîte de dialogue d'affichage se termine. C'est une bonne abstraction car elle peut être utilisée plusieurs fois au cours de l'application.

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

Ensuite, nous pouvons l'appeler dans un composant Vue comme AppDetails.vue :

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

Non seulement nous pouvons l'utiliser dans ce composant, mais nous pouvons utiliser la même fonctionnalité dans toute l'application !

Deux Hooks qui se comprennent

Nous avons déjà mentionné que l'une des principales différences entre les Hooks et les mixins est que les Hooks peuvent réellement se transmettre des valeurs. Regardons cet exemple simple mais quelque peu contre nature.

Dans notre application, nous devons faire un calcul dans un crochet réutilisable et quelque chose qui doit utiliser le résultat de ce calcul. Dans notre cas, nous avons un crochet qui prend la largeur de la fenêtre et la transmet à l'animation afin qu'elle sache qu'elle ne se déclenchera que lorsque nous serons sur un écran plus grand.

Voir la démonstration vidéo pour plus de détails : css-tricks.com/wp-content/…

Premier hook :

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

Ensuite, dans le deuxième hook, nous l'utilisons pour créer une condition qui déclenche la logique d'animation :

// 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
            }
          }
        },
        ...

Ensuite, à l'intérieur du composant, nous passons un hook en paramètre à un autre hook :

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

Nous pouvons maintenant utiliser des Hooks pour écrire de la logique dans toute notre application ! Encore une fois, il ne s'agit pas d'un exemple naturel à des fins de démonstration, mais vous pouvez voir comment cela peut être efficace pour les grandes applications, en conservant la logique dans des fonctions plus petites et réutilisables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!