👨‍💻 Reagovat z pohledu Bootcampers | 3. díl - ☂️ Háčky

Další motivační citát pro začátek:

V dřívějších příspěvcích jsem diskutoval o důležitosti převodu různých aspektů vaší aplikace React na komponenty třídy. To bylo nutné z různých důvodů (umožnění aktualizací stavu z podřízených komponent atd.) až do února 2019. V mém Bootcampu jsme se tím konkrétně nezabývali a nebudeme, takže jsem si udělal čas, abych se je naučil na mé vlastní a níže vám ukážu, jak fungují.

K vytvoření projektu se vrátíme příští týden, ale bude se stále řídit běžným formátem kódu.

Háčky v praxi – 🏖️ Kód Sandbox 🏖️

Dříve jsme pracovali s kódem, který předváděl použití třídy v Reactu. Tento kód najdete zde:Farm Code

Nyní převedeme tento kód na funkci, která využívá háčky, změnou třídy zpět a použitím příkazu import pro háčky. Pro začátek převedeme naše prohlášení o importu, které obsahuje velkou reakci a malou reakci .

import React, { useState } from "react";

Odstranil jsem Component důležité a místo toho importované useState .

Poté můžeme převést naši třídu zpět na funkci a odstranit konstruktor a metody renderování (což jsou metody životního cyklu, o kterých se dotknu v pozdějším příspěvku). Konečný kód pro App.js by měl vypadat takto:

import React, { useState } from "react";
import "./styles.css";
import Farm from "./Farm/Farm";

function App() {

  return (
    <div className="App">
      <h1>Welcome to My Farm</h1>
      <h2>We have the following:</h2>
      <Farm />
    </div>
  );
}

export default App;

V současné době nevyužíváme výhod státu. Stav je objekt, který řídí chování komponenty. Momentálně s naší aplikací nemanipulujeme, ale zkusme předvést něco, co můžeme dělat se stavem v Reactu.

🐛 Počítejte chyby 🐛

Předpokládejme, že jsme farmář a chceme mít způsob, jak spočítat počet brouků, které jsou na naší farmě (pracujte se mnou, prosím).

Chceme tedy do naší farmářské komponenty přidat tlačítko, které umožní farmáři spočítat všechny chyby, které vidí. Abychom to udělali, musíme využít stav k vykreslení našeho počtu chyb na obrazovku. Namísto použití konstruktoru nebo jedné z dalších metod, které s vámi ještě musím probrat (setState() mimo jiné), pojďme využít výhody háčků.

K tomu můžeme vytvořit proměnné, které nám umožní uložit počet chyb.

const [count, setCount] = useState(0);

Tato definice předchází příkaz return v naší funkci App. Používáme useState() a nastavte count na 0 předáním 0 jako našeho argumentu. Tyto proměnné, které jsou v našem stavu, pak můžeme předat našemu Farm komponentu pomocí následujícího kódu:

<Farm count={count} setCount={setCount} />

Vytvořili jsme setCount a count k dispozici jako rekvizity v našem Farm komponent. Uvnitř Farm , můžeme použít props.count a props.setCount aktualizovat počet pokaždé, když farmář klikne na tlačítko "Přidat chybu".

Kód by vypadal asi takto:

<button onClick={() => props.setCount(props.count + 1)}>Add Bug</button>
<p>
    <strong>Current bugs: {props.count}</strong>
</p>

Jsme schopni aktualizovat stav našeho počtu zvýšením o 1 při každém kliknutí na tlačítko. Obnovení tento počet odstraní, protože je uloženo pouze ve stavu. Potom můžeme počet vykreslit voláním {props.count} .

Sandbox kódu, který využívá háky k aktualizaci stavu v podřízených komponentách, naleznete zde:

Toto byl velmi, velmi vysoký přehled stavu a háčků. Doporučuji číst dále a cvičit sami! Jako další výzvu zjistěte, zda můžete resetovat počet, jakmile dosáhne určitého čísla!

To jsem byl já a sdílel jsem React z pohledu Bootcampera.

Do příštího týdne, kdy se zaměříme trochu více na styling a rozvoj našeho farmářského projektu. ~💠Aaron💠