Felhasználói eszközök

Eszközök a webhelyen


oktatas:telefon:react_native:kampok

< React Native

Kampók

Állapot kampók

A horgok React 16.8 verzióban jelentek meg.

useState

A useState egy horog, amit függvény egy függvénybe írva állapotokat tárolhatunk, amíg a képernyő újrarendelődik.

A useState egy párt ad vissza. Az egyik része az állapot, a másik egy függvény amivel beállíthatjuk az állapotot.

A függvényt meghívhatjuk bárhol. A függvénynek van egy bemenő paramétere, amely meghatározza a kezdeti értéket.

function valami() {
    const [name, setName] = useState('Névtelen');
    const [city, setCity] = useState('ismeretlen');
    const [salary, setSalary] = useState(2350000);
    const [degree, setDegree] = useState([]);
}

Horgokat nem használhatunk osztálykomponensekben, éppen a React használatát teszik lehetővé osztály nélkül.

useEffect

Mellékhatások elvégzésére kitalált függvény.

Célja a felület megjelenítését elválasztani a mellékhatással járó tevékenységekkel. A felület megjelenítése és frissítése folyamatosan történik. A mellékhatásnál ezt nem szeretnénk.

Például adatlehívás, feliratkozás, DOM változtatása React komponensből.

  useEffect(() => {
    fetch(dataURL)
    .then((response) => response.json())
    .then((data) => {
      setData(data.friends);
      setTitle(data.title);
      setDesc(data.desc);
    })
    .catch((error) => alert(error))
    .finally(()=>setLoading(false));
  }); 

Ha a letöltött adat egy tömb:

  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(dataURL)
    .then((response) => response.json())
    .then((data) => {
      setData(data);
    })
    .catch((error) => alert(error))
    .finally(()=>setLoading(false));
  }, []); 

Szabályok

Horgokat nem hívhatunk csak a legfelsőbb szinten. A horgokat csak React függvényekből hívjuk.

oktatas/telefon/react_native/kampok.txt · Utolsó módosítás: 2021/12/31 16:39 szerkesztette: admin