• Szerző: Sallai András
• Copyright © Sallai András, 2021, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

A horgok (vagy kampók) React 16.8 verzióban jelentek meg.

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 {useState} from 'react';
 
export default function App() {
  const [counter, setCounter] = useState(0);
  return (<View></View>);
}

import React from 'react';
 
export default function App() {
  const [counter, setCounter] = React.useState(0);
  return (<View></View>);
}

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

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.

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

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:

<FaltList
    data={images}
    renderItem={ ({image) => (
        <Image 
            source={image.src}
            style={{
                width: 200,
                height: 200,
                resizeMode: 'contain',
            }}
        />
    )}
/>