Hooks與vue的相關(guān)知識(shí)點(diǎn)有哪些

這篇文章將為大家詳細(xì)講解有關(guān)Hooks與vue的相關(guān)知識(shí)點(diǎn)有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

Hooks是React在V16.7.0-alpha版本中引入的，Hooks主要是對(duì)模式的復(fù)用提供了一種更明確的思路。

不要把 Hooks 和 Vue 的生命周期鉤子（Lifecycle Hooks） 弄混了，Hooks 是 React 在 V16.7.0-alpha 版本中引入的，而且?guī)滋旌?Vue 發(fā)布了其概念驗(yàn)證版本。雖然 Hooks 是由 React 提出的，它是一個(gè)對(duì)各 JavaScript 框架生態(tài)系統(tǒng)都有價(jià)值的、重要的組合機(jī)制，因此我們今天會(huì)花一點(diǎn)時(shí)間討論 Hooks 意味著什么。

Hooks主要是對(duì)模式的復(fù)用提供了一種更明確的思路 —— 避免重寫組件本身，并允許有狀態(tài)邏輯的不同部分能無縫地進(jìn)行協(xié)同工作。

最初的問題

就 React 而言，問題在于：在表達(dá)狀態(tài)的概念時(shí)，類是最常見的組件形式。無狀態(tài)函數(shù)式組件也非常受歡迎，但由于它們只能單純地渲染，所以它們的用途僅限于展示任務(wù)。

類本身存在一些問題。例如，隨著 React 變得越來越流行，類的問題也普遍成為新手的阻礙。開發(fā)者為了理解 React，也必須理解類。綁定使得代碼冗長且可讀性差，并且需要理解 JavaScript 中的 this。這里還討論了使用類所帶來的一些優(yōu)化障礙。

在邏輯復(fù)用方面，我們通常使用 render props 和高階組件等模式。但使用這些模式后會(huì)發(fā)現(xiàn)自己處于類似的“厄運(yùn)金字塔”中 —— 樣式實(shí)現(xiàn)地獄，即過度使用嵌套可能會(huì)導(dǎo)致組件難以維護(hù)。這導(dǎo)致我想對(duì) Dan Abramov 像喝醉了一樣大吼大叫，沒有人想要那樣。

Hooks 允許我們使用函數(shù)調(diào)用來定義組件的有狀態(tài)邏輯，從而解決這些問題。這些函數(shù)調(diào)用變得更具有組合性、可復(fù)用性，并且允許我們?cè)谑褂煤瘮?shù)式組件的同時(shí)能夠訪問和維護(hù)狀態(tài)。React 發(fā)布 Hooks 時(shí)，人們很興奮 —— 下面你可以看到 Hooks 展示的一些優(yōu)勢，關(guān)于它們?nèi)绾螠p少代碼和重復(fù)：

在維護(hù)方面，簡單性是關(guān)鍵，Hooks 提供了一種單一的、函數(shù)式的方式來實(shí)現(xiàn)邏輯共享，并且可能代碼量更小。

為什么 Vue 中需要 Hooks？

讀到這里你肯定想知道 Hooks 在 Vue 中必須提供什么。這似乎是一個(gè)不需要解決的問題。畢竟，類并不是 Vue 主要使用的模式。Vue 提供無狀態(tài)函數(shù)式組件（如果需要它們），但為什么我們需要在函數(shù)式組件中攜帶狀態(tài)呢？我們有 mixins 用于組合可以在多個(gè)組件復(fù)用的相同邏輯。問題解決了。

我想到了同樣的事情，但在與 Evan You 交談后，他指出了我忽略的一個(gè)主要用例：mixins 不能相互消費(fèi)和使用狀態(tài)，但 Hooks 可以。這意味著如果我們需要鏈?zhǔn)椒庋b邏輯，可以使用 Hooks。

Hooks 實(shí)現(xiàn)了 mixins 的功能，但避免了 mixins 帶來的兩個(gè)主要問題：

• 允許相互傳遞狀態(tài)。

• 明確指出邏輯來自哪里。

如果使用多個(gè) mixins，我們不清楚哪個(gè)屬性是由哪個(gè) mixins 提供的。使用 Hooks，函數(shù)的返回值會(huì)記錄消費(fèi)的值。

那么，這在 Vue 中如何運(yùn)行呢？我們之前提到過，在使用 Hooks 時(shí)，邏輯在函數(shù)調(diào)用時(shí)表達(dá)從而可復(fù)用。在 Vue 中，這意味著我們可以將數(shù)據(jù)調(diào)用、方法調(diào)用或計(jì)算屬性調(diào)用封裝到另一個(gè)自定義函數(shù)中，并使它們可以自由組合。數(shù)據(jù)、方法和計(jì)算屬性現(xiàn)在可用于函數(shù)式組件了。

例子

讓我們來看一個(gè)非常簡單的 hook，以便我們?cè)诶^續(xù)學(xué)習(xí) Hooks 中的組合例子之前理解構(gòu)建塊。

useWat?

好的，Vue Hooks 和 React Hooks 之間存在交叉部分。使用 use 作為前綴是 React 的約定，所以如果你在 React 中查找 Hooks，你會(huì)發(fā)現(xiàn) Hooks 的名稱都會(huì)像 useState、useEffect 等。更多信息可以查看這里。

在 Evan 的在線 demo 里，你可以看到他在何處訪問 useState 和 useEffect 并用于 render 函數(shù)。

如果你不熟悉 Vue 中的 render 函數(shù)，那么看一看官網(wǎng)文檔可能會(huì)有所幫助。

但是當(dāng)我們使用 Vue 風(fēng)格的 Hooks 時(shí)，我們會(huì)如何命名呢 —— 你猜對(duì)了 —— 比如：useData，useComputed等。

因此，為了讓我們看看如何在 Vue 中使用 Hooks，我創(chuàng)建了一個(gè)示例應(yīng)用程序供我們探索。

在 src/hooks 文件夾中，我創(chuàng)建了一個(gè) hook，它在 useMounted hook 上阻止了滾動(dòng)，并在 useDestroyed 上重新啟用滾動(dòng)。這有助于我在打開查看內(nèi)容的對(duì)話框時(shí)暫停頁面滾動(dòng)，并在查看對(duì)話框結(jié)束時(shí)再次允許滾動(dòng)。這是一個(gè)好的抽象功能，因?yàn)樗谡麄€(gè)應(yīng)用程序中可能會(huì)多次使用。

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 組件中調(diào)用它：

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

我們不僅可以在該組件中使用它，還可以在整個(gè)應(yīng)用程序中使用相同的功能！

能夠相互理解的兩個(gè) Hooks

我們之前提到過，Hooks 和 mixins 之間的主要區(qū)別之一是 Hooks 實(shí)際上可以互相傳值。讓我們看一下這個(gè)簡單但有點(diǎn)不自然的例子。

在我們的應(yīng)用程序中，我們需要在一個(gè)可復(fù)用的 hook 中進(jìn)行計(jì)算，還有一些需要使用該計(jì)算結(jié)果的東西。在我們的例子中，我們有一個(gè) hook，它獲取窗口寬度并將其傳遞給動(dòng)畫，讓它知道只有當(dāng)我們?cè)诟蟮钠聊簧蠒r(shí)才會(huì)觸發(fā)。

詳見視頻演示：css-tricks.com/wp-content/…

第一個(gè) 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
  }
}

然后，在第二個(gè) hook 中，我們使用它來創(chuàng)建一個(gè)觸發(fā)動(dòng)畫邏輯的條件：

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

然后，在組件內(nèi)部，我們將一個(gè) hook 作為參數(shù)傳遞給另一個(gè) hook：

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

現(xiàn)在我們可以在整個(gè)應(yīng)用程序中使用 Hooks 來編寫邏輯！再提一下，這是一個(gè)用于演示目的不太自然的例子，但你可以看到這對(duì)于大型應(yīng)用程序，將邏輯保存在較小的、可復(fù)用的函數(shù)中是有效的

關(guān)于“Hooks與vue的相關(guān)知識(shí)點(diǎn)有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。