[[oktatas:telefon:react_native|< React Native]] ====== Kampók ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2021, 2023 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== Állapot kampók ===== A horgok (vagy kampók) 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. ==== Importálás ====


import {useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);
  return ();
}


import React from 'react';

export default function App() {
  const [counter, setCounter] = React.useState(0);
  return ();
}

===== 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));
  }, []);

==== Függőség megadása ==== A useEffect() második paramétereként megadott függőség a counter. Ha a caounter változik, akkor lefut a useEffect() első paraméterében megadott névtelen függvény.


    const [counter, setCounter] = useState(0);

    useEffect(() => {
        console.log(counter.toString())
    }, [counter]);

A második paraméter egy tömb. Ha üresen hagyjuk, akkor csak a komponens inicializálásakor fut le. ===== Szabályok ===== Horgokat nem hívhatunk csak a legfelsőbb szinten. A horgokat csak React függvényekből hívjuk. ===== Kezdőérték =====


const [images, setImages] = useState([
  require('./assets/kep1.png'),
  require('./assets/kep2.png'),
  require('./assets/kep3.png'),
  require('./assets/kep4.png'),
  require('./assets/kep5.png')
]);


  const [images, setImages] = useState([
    {src:require('./assets/kep1.png'),key:'1'},
    {src:require('./assets/kep2.png'),key:'2'},
    {src:require('./assets/kep3.png'),key:'3'},
    {src:require('./assets/kep4.png'),key:'4'},
    {src:require('./assets/kep5.png'),key:'5'}
  ]);

Példa a listában felhasználva:


 (
        
    )}
/>