Как да разрушим основите на React Kuoks

Куките се превърнаха в доста мощна нова функция на React. Те могат да ви сплашат, ако не сте сигурни какво точно се случва зад кулисите. Красавицата вече е в състояние да управлява състояние по прост (и за многократна употреба) в рамките на функционални компоненти.

Но защо да не използваме клас? Без да се отдалечавате твърде много от темата, функциите осигуряват по-лесен начин за писане на вашите компоненти, като ви напътстват да пишете по по-чист и многократен начин за използване. Бонус: обикновено прави тестовете за писане по-лесно.

Има много случаи за използване на куки, така че няма да се гмурна в примери. Не трябва да е твърде лошо, за да достигнете скорост с няколко бързи линии. За целта на тази статия, да приемем, че „бисквитките“ на браузъра не са нещо и това са годни за консумация.

Гмуркане в буркана с бисквитки

Тук имаме MyCookies, функционален компонент, който можем да считаме за нашия буркан с бисквитки. Да речем, че искаме вътрешно да следим колко бисквитки имаме в буркана. С новия API за куки можем да добавим проста линия, използвайки useState за справяне със задачата.

const MyCookies = () => {
  const [бисквитки, setCookieCount] = useState (0);
  ...
};

Чакай, как да извлечем бисквитките от това?

Ако смятате, че горното е вълшебно и се чудите как се настройват стойностите в масива, ще трябва да разберете основите на разрушаването на масива.

Докато деструктурирането на обект ще използва същия ключ, където и да се опитате да го издърпате, деструкцията на масиви използва реда на елементите в масива.

const [един, два] = [1, 2];
console.log (един); // 1
console.log (два); // 2

Въпреки че по-горе изглежда, че ги назовава в определен ред, това не е както е показано по-долу:

const [две, един] = [1, 2];
console.log (два); // 1
console.log (един); // 2

Без да отиваме твърде далеч надолу по техническата заешка дупка, useState е функция, която връща масив, който разрушаваме за използване в нашия компонент.

Какво ще кажете за 0 вътре в извикването на useState? Това е просто първоначалната стойност, на която задаваме държавната инстанция. В този случай за съжаление ще започнем с 0 бисквитки.

Всъщност използвайте състояние

След като имаме деструктурираните бисквитки и функцията setCookiesCount, можем да започнем да взаимодействаме с локалното състояние на компонента, както бихте могли да направите, използвайки setState в клас компонент.

По време на рендериране нашата стойност на бисквитките ще бъде това извикване на стойността на вътрешното състояние на useState, подобно на това, което може да видите с this.state. За да актуализираме тази стойност, можем просто да се обадим на setCookiesCount.

const MyCookies = () => {
  const [бисквитки, setCookieCount] = useState (0);
  връщане (
    <>
      

Бисквитки: {cookies}

      <бутон onClick = {() => setCookieCount (бисквитки + 1)}>         Добавете бисквитка               ); };

Ако сте по-свикнали със синтаксиса на класа, можете да актуализирате състоянието, като използвате this.setState, изглежда така:

клас MyCookies разширява React.Component {
  конструктор () {
    супер ();
    this.state = {
      бисквитки: 0
    }
  }
  render () {
    връщане (
      <>
        

Бисквитки: {this.state.cookies}

        <бутон onClick = {() => this.setState ({cookies: this.state.cookies + 1})}>           Добавете бисквитка                     )   } }

Как да използвате ефекти

Често компонентите се нуждаят от начин за създаване на странични ефекти, които непременно няма да прекъснат функционалния поток на функционален компонент. Да речем, че имаме някъде броя бисквитки, които сме запазили на сървър, може би ще искаме да вземем броя, когато приложението се зареди.

const MyCookies = () => {
  const [бисквитки, setCookieCount] = useState (0);
  useEffect (() => {
    getCookieCount (). тогава ((брой) => {
      setCookieCount (брой);
    })
  });
  ...
};

След като компонентът изведе, всичко вътре в useEffect ще работи. Всички странични ефекти, произтичащи от useEffect, ще се появят само след завършване на рендеринга. След това, след като useEffect работи, ние задействаме getCookieCount и използваме предишната си функция setCookieCount, за да актуализираме състоянието на компонента.

Изчакайте, има нещо нередно ...

Все пак има код в горния код. Този ефект ще се стартира всеки път, като по същество изтрива всякакви увеличения на стойността на бисквитката ни от оригиналния бутон Добавяне на бисквитки.

За да заобиколим това, можем да зададем втори аргумент на функцията useEffect, която ни позволява да информираме React кога да го стартираме отново. В нашия пример по-горе, задаването на този втори аргумент на празен масив ще го накара да се изпълнява само веднъж.

const MyCookies = () => {
  const [бисквитки, setCookieCount] = useState (0);
  useEffect (() => {
    getCookieCount (). тогава ((брой) => {
      setCookieCount (брой);
    })
  }, []);
  ...
};

В повечето случаи обаче ще искате да предадете масив от зависимости, които, когато бъдат променени, ще предизвикат отново UseEffect. Кажете например, че получавате броя на конкретен тип бисквитки и искате да получите броя отново, ако този тип се промени.

const MyCookies = ({{cookieType = 'шоколад'}) => {
  const [бисквитки, setCookieCount] = useState (0);
  useEffect (() => {
    getCookieCount (). тогава ((брой) => {
      setCookieCount (брой);
    })
  }, [cookieType]);
  ...
};

В горния код, всеки път, когато проп бисквитките ни се променят, React знае, че ние зависим от него за нашия ефект и ще повтори този ефект.

Опитвам се да използвам контекст

Няма да навлизам в подробностите на контекстния API на React, тъй като това е малко извън обхвата. Ако обаче сте запознати с него, куката useContext ви позволява лесно да използвате контекста си във вашия функционален компонент.

импортиране на BasketContext от 'контекст';

const Basket = ({деца}) => {
  връщане (
    
      

Моята кошница

      {деца}     
  ); } // MyCookies.js const MyCookies = ({{cookieType = 'шоколад'}) => {   const basketItems = useContext (BasketContext);   ... };

В горния код, предвид вече създадения ни контекст, можем незабавно да „използваме“ споменатия контекст и да съберем стойностите, предадени на нашия доставчик на контекст.

Почистване на куките

Това, което прави куките още по-мощни, е комбинирането и абстрахирането им СУШЕНЕ на кода ви по-чист начин. Като кратък последен пример, можем да вземем нашите примери за бисквитки на useState и useEffect и да ги абстрахираме в тяхната собствена функция [Name], ефективно създавайки персонализирана кука.

// useCookies.js
функция useCookies (началенCookieCount) {

  const [бисквитки, setCookieCount] = useState (началенCookieCount);

    useEffect (() => {
    getCookieCount (). тогава ((брой) => {
      setCookieCount (брой);
    })
  }, []);

  функция addCookie () {
    setCookieCount (бисквитки + 1);
    console.log ( " ');
  }

  функция RemoveCookie () {
    setCookieCount (бисквитки - 1);
    console.log ( " ');
  }

  връщане {
    бисквитки,
    addCookie,
    removeCookie
  }
};

// MyCookies.js
const MyCookies = () => {
  const {cookies, addCookie, removeCookie} = useCookies (0);
  ...
};

Безопасно успяхме да абстрахираме нашата държавна логика и все още я използваме за управление на нашите бисквитки.

Много повече, за да се закачат

Това са основните 3 куки, които React ни дава, но има много повече, които те предоставят извън кутията, всички със същите основни принципи, които React документацията върши добра работа при обяснението.

Още javascript, UX и други интересни неща от мен в Twitter.

Първоначално публикуван на https://www.colbyfayock.com на 17 април 2019 г.