React kártyák mintái az alkalmazásunkból

Töltse le alkalmazásunkat az App Store-ból vagy a Google Play-ből, hogy több ingyenes tanulókártyához jusson, vagy iratkozzon fel az összes tanulókártya eléréséhez.

Mi az a JSX és miért használja a React?

A JSX egy szintaxis kiterjesztés a JavaScript számára, amely lehetővé teszi HTML struktúrák közvetlen írását a JavaScript kódban. Ez az egyik alapeleme, amelyre a React.js épül. Ezért a JSX olyan fontos a React ökoszisztémában.

A React több okból használja a JSX-et:

1. Kód tisztasága: A JSX egyszerűsíti a kódfejlesztési folyamatot, lehetővé téve a fejlesztők számára, hogy közvetlenül a JavaScript-ben helyezzenek el HTML struktúrákat. JSX nélkül a felhasználói felületek létrehozása a Reactben jelentősen bonyolultabb lenne.

2. Használat könnyedsége: A JSX a JavaScriptet HTML-hez hasonlóvá teszi, ami megkönnyíti a fejlesztők számára a használatát, különösen azok számára, akik már ismerik az HTML-t.

3. Biztonság: A JSX automatikusan védi a kódot mindenféle támadással szemben, például XSS (Cross-Site Scripting), egyedi elem beágyazáson keresztül.

4. Teljesítmény: A JSX kód optimalizálva van a teljesítmény érdekében. JavaScript szintaxisra fordítódik, amelyet a webböngészők gyorsabban értelmeznek.

Technikailag a JSX nem más, mint a `React.createElement(component, props, ...children)` funkció szintaktikai cukorkája.

Mi az a Virtuális DOM és milyen előnyökkel rendelkezik?

A Virtuális DOM, vagy Document Object Model (DOM) virtuális modelje, egy olyan koncepció, amelyet bizonyos JavaScript könyvtárak, mint például a React, használnak. Ez egy könnyű másolata a valódi DOM-nak, amelyet a memóriában tartanak és függetlenül frissítenek a tényleges DOM-tól.

A Virtuális DOM fő előnyei:

1. Gyorsabbak a frissítések. A Virtuális DOM könnyebb, és kevesebb művelet fut át rajta, mint a valódi DOM esetében. Ennek eredményeként a frissítési műveletek gyorsabban történnek.

2. Csökkenti a valódi DOM terhelését. Minden változást először a virtuális DOM-ban dolgoznak fel, majd egy újrarendezésnek nevezett folyamaton keresztül bevezetik a kiválasztott változásokat a valódi DOM-ba. Ez elkerülheti a nagy, gyakori DOM frissítéseket.

3. Optimalizálja a renderelési folyamatot. A React a Virtuális DOM használatával képes kiszámítani a legkényelmesebb módot a valódi DOM frissítéseinek végrehajtásához. Ez csökkenti a szükséges műveletek számát és javítja a renderelési teljesítményt.

4. Egyszerűbbé válik a kódolás. A fejlesztők úgy kódolhatnak, mintha az egész oldal újra lenne renderelve minden változás után. A React gondoskodik a folyamat optimalizálásáról, hogy csak a virtuális és valódi DOM szinkronizálásához szükséges minimális munkát végezzék el.

Mik azok a propsok és hogyan továbbíthatók a React komponensekben?

A "props" (röviden az angol "properties" szóból) a React könyvtár komponenseinek tulajdonságai. Azokat használják adatok átadására egyik komponensből a másikba, ezek az adatok, amelyeket egy komponens a szülő komponenstől kap, és általában akkor adódnak át, amikor a komponenst meghívják.

A "props" értékei nem módosíthatók, ami azt jelenti, hogy egy komponensnek nem szabad módosítania a kapott "props" értékeit, csak olvasnia kell őket.

A "props" egyirányú módon kerülnek átadásra (felülről lefelé), tehát a szülő komponensektől a gyermek komponensekig. Ez hasonló az attribútumok HTML elemeknek történő átadásához.

Íme egy példa a "props" használatára:

function Welcome(props) {
  return <h1>Welcome, {props.name}</h1>;
}

function App() {
  return <Welcome name = "Christopher"/>;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

A fenti példában létrehozunk egy "Welcome" komponenset, amely egy "name" prop-ra számít. Ezután az "App" komponensben létrehozunk egy példányt a "Welcome" komponensből, és átadjuk neki a "name" prop-ot a "Christopher" értékkel. Ennek eredményeképpen, ahol a "Welcome" komponenst használtuk, a "Welcome, Christopher" szöveg fog megjelenni.

Magyarázza el, mi az a useEffect horog és mire használják.

A React.js-ben használt useEffect hook segítségével oldalhatásokat hajthatunk végre funkcionális komponensekben. Az oldalhatások tipikusan olyan műveletek, amelyek közvetlenül nem befolyásolják a komponens megjelenítését, de szükségesek a megfelelő működéséhez, mint például adatok lekérése egy API-ból, időzítők kezelése, vagy erőforrások felszabadítása.

Hasonlóan működik, mint a komponens életciklus-metódusai: a componentDidMount, componentDidUpdate és componentWillUnmount osztály komponensekben.

Három különböző változatban lehet használni:

1. Második paraméter nélkül: A kód minden renderelés után lefut.

useEffect(() => {
  console.log('Ez minden renderelés után lefut');
});

2. Egy üres tömböt adunk meg második paraméterként: A kód csak egyszer fut le az első renderelés után, ami analóg a componentDidMounttel.

useEffect(() => {
  console.log('Ez csak egyszer fut le, az első renderelés után');
}, []);

3. Egy függőségek tömbjét adunk meg második paraméterként: A kód lefut az első renderelés után, majd minden alkalommal, amikor bármelyik függőség értéke a tömbben megváltozik.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('Ez lefut az első renderelés után, és minden alkalommal, amikor a "count" megváltozik');
}, [count]);

Összefoglalva, az useEffect hook lehetővé teszi az oldalhatások végrehajtását a funkcionális komponensek renderelése után vagy közben, ami tiszta és érthető kódot eredményez, miközben teljes működést biztosít.

React kártyák

React kártyák mintái az alkalmazásunkból

Mi az a JSX és miért használja a React?

Mi az a Virtuális DOM és milyen előnyökkel rendelkezik?

Mik azok a propsok és hogyan továbbíthatók a React komponensekben?

Magyarázza el, mi az a useEffect horog és mire használják.

Letöltés IT Flashcards Most