Ką kabliukai reiškia Vue

Negalima painioti su „Lifecycle Hooks“, „React“ versijoje kabliai buvo pristatyti 16.7.0 alfa versijoje, o po kelių dienų „Vue“ buvo išleistas koncepcijos įrodymas. Nors tai pasiūlė „React“, tai iš tikrųjų yra svarbus kompozicijos mechanizmas, turintis naudos visoms „JavaScript“ sistemos ekosistemoms, todėl šiandien praleisime šiek tiek laiko aptardami, ką tai reiškia.

„Hooks“ siūlo aiškesnį būdą galvoti apie daugkartinio naudojimo modelius – tokiu būdu išvengiama perrašymo į pačius komponentus ir leidžiama skirtingoms būsenos logikos dalims sklandžiai dirbti kartu.

Pradinė problema

Kalbant apie „React“, problema buvo tokia: klasės, reiškiant valstybės sampratą, buvo dažniausia komponentų forma. Be pilietybės funkciniai komponentai taip pat buvo gana populiarūs, tačiau dėl to, kad jie iš tikrųjų galėjo tik perteikti, jie buvo naudojami tik pristatymo užduotims atlikti.

Klasės savaime pateikia keletą klausimų. Pvz., Kai „React“ tapo visuotinai paplitęs, kliudė ir naujokai. Norint suprasti „React“, reikėjo suprasti ir klases. Įrišimas padarė kodą daugžodžiu, taigi mažiau įskaitomu ir suprato this reikėjo „JavaScript“. Čia taip pat yra keletas optimizavimo kliūčių, kurias pateikia klasės.

Kalbant apie logikos pakartotinį naudojimą, buvo įprasta naudoti tokius modelius kaip „render“ rekvizitai ir aukštesnės pakopos komponentai, tačiau mes atsidūrėme panašioje „pražūties piramidėje“ – stiliaus įgyvendinimo pragare, kur lizdavietės buvo taip smarkiai išnaudotos, kad komponentai gali būti sunku prižiūrėti. Tai privertė mane girtauti po Daną Abramovą, ir niekas to nenori.

Kabliai išsprendžia šias problemas leidžiant mums apibrėžti komponento būsenos logiką naudojant tik funkcijų iškvietimus. Šie funkcijų skambučiai tampa lengviau kuriami, daugkartinio naudojimo ir leidžia mums išreikšti kompoziciją funkcijomis, vis tiek pasiekiant ir palaikant būseną. Kai „React“ buvo paskelbti kabliukai, žmonės buvo susijaudinę – galite pamatyti keletą čia pavaizduotų pranašumų, susijusių su tuo, kaip jie sumažina kodą ir pasikartojimą:

Kalbant apie priežiūrą, paprastumas yra pagrindinis dalykas, o „Kabliai“ suteikia vieną, funkcinį būdą, kaip pasiekti bendrą logiką, naudojant mažesnį kodo kiekį.

Kodėl kabliukai Vue?

Galite perskaityti tai ir pasidomėti, ką „Hooks“ gali pasiūlyti „Vue“. Tai atrodo problema, kurios nereikia spręsti. Juk „Vue“ dažniausiai nenaudoja klasių. „Vue“ siūlo funkcinius komponentus be pilietybės (ar jums jų reikia), bet kodėl mums reikia nešti būseną funkciniame komponente? Mes turime kompozicijų mišinius, kuriuose galime pakartotinai naudoti tą pačią logiką keliems komponentams. Problema išspręsta.

Aš galvojau tą patį, bet pasikalbėjęs su Evanu You, jis atkreipė dėmesį į pagrindinį naudojimo atvejį, kurio praleidau: miksinai negali vartoti ir naudoti būsenos vienas nuo kito, tačiau Hooksas gali. Tai reiškia, kad jei mums reikia grandinės apimtos logikos, tai dabar įmanoma naudojant „Hooks“.

Kabliais pasiekiama tai, ką daro mišiniai, tačiau išvengiama dviejų pagrindinių su mišinukais susijusių problemų:

  • Jie leidžia mums pereiti būseną iš vienos į kitą.
  • Jie aiškiai nurodo, iš kur kyla logika.

Jei naudojame daugiau nei vieną mišinį, neaišku, kurią savybę suteikė kuris mišinys. Naudojant „Hooks“, funkcijos grąžinimo vertė dokumentuoja suvartojamą vertę.

Taigi, kaip tai veikia „Vue“? Anksčiau minėjome, kad dirbant su „Hooks“ logika išreiškiama funkcijų iškvietimais, kurie tampa daugkartinio naudojimo. Programoje „Vue“ tai reiškia, kad duomenų skambutį, metodo skambutį ar apskaičiuotą skambutį galime sugrupuoti į kitą pasirinktinę funkciją ir padaryti juos laisvai kuriamus. Dabar duomenys, metodai ir skaičiavimai tampa prieinami funkciniuose komponentuose.

Pavyzdys

Pereikime per tikrai paprastą kabliuką, kad galėtume suprasti statybinius elementus, prieš pereidami prie kompozicijos pavyzdžio „Hooks“.

useWat?

Gerai, štai ką mes turėjome, ką galėtumėte pavadinti, „React“ ir „Vue“ kryžminimas. The use prefiksas yra „React“ konvencija, taigi, jei ieškosite „Hooks in React“, rasite panašių dalykų useState, useEffectDaugiau informacijos čia.

Tiesioginėje Evano demonstracijoje galite pamatyti, kur jis pasiekia useState ir useEffect pateikimo funkcijai.

Jei nesate susipažinę su „Vue“ pateikimo funkcijomis, gali būti naudinga į tai žvilgtelėti.

Bet kai dirbame su „Vue“ stiliaus kabliukais, turėsime – jūs atspėjote – tokius dalykus: useData, useComputedir kt.

Taigi, norėdami sužinoti, kaip naudosime „Hooks in Vue“, sukūriau programos pavyzdį, kurį galėtume ištirti.

Aplanke src / hooks sukūriau kablį, kuris neleidžia slinkti useMounted užsikabinkite ir vėl įjunkite useDestroyed. Tai man padeda pristabdyti puslapį, kai atidarome dialogo langą, kad galėtumėte peržiūrėti turinį, ir leidžia vėl slinkti, kai baigsime peržiūrėti dialogą. Tai yra geras funkcionalumas, nes abstrakti, nes tai tikriausiai būtų naudinga kelis kartus visoje programoje.

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

Tada galime tai pavadinti tokiu „Vue“ komponentu, esančiu „AppDetails.vue“:

<script>
import { preventscroll } from "./../hooks/preventscroll.js";
...

export default {
  ...
  hooks() {
    preventscroll();
  }
}
</script>

Mes naudojame jį tame komponente, tačiau dabar galime naudoti tą pačią funkciją visoje programoje!

Du kabliai, suprantantys vienas kitą

Anksčiau minėjome, kad vienas iš pagrindinių kabliukų ir maišytuvų skirtumų yra tas, kad kabliukai iš tikrųjų gali perduoti vertybes vienas nuo kito. Pažvelkime į tai paprastu, nors ir šiek tiek sugalvotu pavyzdžiu.

Tarkime, kad savo programoje turime atlikti skaičiavimus viename kablyje, kuris bus pakartotinai naudojamas kitur, ir dar kažką, kas turi naudoti tą skaičiavimą. Mūsų pavyzdyje yra kablys, kuris ima lango plotį ir perduoda jį į animaciją, kad jis žinotų, jog jis šaudo tik tada, kai esame didesniuose ekranuose.

Pirmajame kabliuke:

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

Tada antroje mes tai naudojame norėdami sukurti sąlygą, kuri suaktyvina animacijos logiką:

// the data comes from the other hook
export 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
            }
          }
        },
        ...

Tada pačiame komponente mes perduosime vienas kitą:

<script>
import { logolettering } from "./../hooks/logolettering.js";
import { windowwidth } from "./../hooks/windowwidth.js";

export default {
  hooks() {
    logolettering(windowwidth());
  }
};
</script>

Dabar mes galime sukurti logiką naudodami kabliukus visoje savo programoje! Vėlgi, tai yra sugalvotas pavyzdys demonstravimo tikslais, tačiau jūs galite pamatyti, kaip tai gali būti naudinga didelio masto programoms laikyti daiktus mažesnėse, daugkartinio naudojimo funkcijose.

Ateities planai

„Vue Hooks“ jau galima naudoti šiandien su „Vue 2.x“, tačiau jie vis dar yra eksperimentiniai. Mes planuojame integruoti „Hooks“ į „Vue 3“, tačiau tikriausiai nukrypsime nuo „React“ API įgyvendindami savo veiksmus. Manome, kad „React Hooks“ yra labai įkvepiantys ir galvojame, kaip „Vue“ kūrėjams pristatyti jo pranašumus. Mes norime tai padaryti taip, kad papildytų idiomatinį „Vue“ vartojimą, todėl dar reikia daug eksperimentuoti.

Galite pradėti patikrinę repo čia. Kabliai greičiausiai taps mišinių pakaitalu, taigi, nors ši funkcija dar tik ankstyvoje stadijoje, greičiausiai tai yra koncepcija, kurią tuo metu būtų naudinga ištirti.

(Nuoširdus ačiū Evanui You ir Danui Abramovui už šio straipsnio įrodymą.)

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *

Previous post Štai ką Bernie Sandersas iš tikrųjų padarė pilietinių teisių judėjime – motina Jones
Next post Tikrai ne „Windows 95“: kokios operacinės sistemos palaiko daiktus kosmose?