Lekce 1.X

Mastering React Hooks

React Hooks transformovaly způsob, jakým píšeme komponenty, ale jak dobře skutečně znáte mechaniku za nimi? Otestujte své znalosti těmito pěti otázkami, sahajícími od konceptuálních definic po ladění rozbitého kódu.

1

Otázka 1: Co jsou Hooks v Reactu?

Co jsou Hooks v Reactu?

Vyberte všechny, které platí:

Kolekce předpřipravených komponent v Reactu, které lze snadno přizpůsobit a znovu použít napříč více projekty

Způsob, jak zachovat hodnoty mezi renderováními

Bezpodmínečná prohlášení o potřebách vaší komponenty

Speciální funkce, které vám umožňují získat pomoc od Reactu

2

Otázka 2: Jaká omezení mají Hooks?

Jaká omezení mají Hooks?

Vyberte všechny, které platí:

Nemůžete je volat uvnitř podmínek, smyček nebo jiných vnořených funkcí

Nemohou přistupovat k prohlížečovým API jako setInterval nebo window

Musí začínat s use

Nemohou přistupovat k props

3

Otázka 3: Co je špatně s tímto kódem?

Co je špatně s tímto kódem?

javascript
export default function ToggleMessage() {
  let visible = false;

  const toggleVisibility = () => {
    visible = !visible;
  };

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle Message</button>
      {visible && <p>The message is now visible!</p>}
    </div>
  );
}
Vyberte všechny, které platí:

Nic

Proměnná visible se nepoužívá

UI se neaktualizuje, když se visible změní

visible se nezachová mezi renderováními

4

Otázka 4: Co umožňuje useState Hook?

Co umožňuje useState Hook?

Vyberte všechny, které platí:

Spustit nové renderování komponenty

Předat data do podřízených komponent

Přidat stav do komponenty

Zachovat hodnotu mezi renderováními

5

Otázka 5: Co je špatně s tímto kódem?

Co je špatně s tímto kódem?

javascript
import * as React from "react";

export default function ThemeSwitcher() {
  const [setTheme, theme] = React.useState("light")

  const handleClick = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };

  return (
    <button onClick={handleClick} className={theme}>
      Switch Theme
    </button>
  );
}
Vyberte správnou odpověď:

Nic

Naše destrukturování stavu je obrácené

Nemůžeme použít dynamické hodnoty stavu jako className

useState vrací objekt, ne pole