szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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. 

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

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


==== Importálás ====

<code javascript>
import {useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);
  return (<View></View>);
}
</code>

<code javascript>
import React from 'react';

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

===== 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.



<code javascript>
  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));
  }); 
</code>

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

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

==== 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.

<code javascript>
    const [counter, setCounter] = useState(0);

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

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 =====

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


<code javascript>
  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'}
  ]);
</code>

Példa a listában felhasználva:

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

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
