Ha a következő webhelyéhez használja a React szolgáltatást? – CloudSavvy IT

A React az utóbbi években megnőtt. Leírása „JavaScript-könyvtár a felhasználói felületek felépítéséhez” React kijelentője a megjelenítés megközelítése leegyszerűsíti a komplex felhasználói kezelőfelületek felépítését.

A React egy sokoldalú eszköz, széleskörű alkalmazásokkal, a hagyományos webhelyektől az összetett webalkalmazásokig. Nincs egyértelmű vonal, amely meghatározná, mikor kell használni a React alkalmazást. Ehelyett vannak iránymutatók, amelyek segítenek felmérni, hogy a React alkalmas lehet-e.

Keresse meg az Alkatrészeket

Az egyik jele annak, hogy egy webhely számára előnyös lehet a React, ha nagyszámú önálló összetevő újrafelhasználását tervezi. Az absztrakt felületelemek, például az űrlapvezérlők és az adatmegjelenítő kártyák, elsődleges jelöltek a React komponensekké történő átalakításhoz. Ez különösen akkor igaz, ha az összetevők valószínűleg a böngésző által biztosítottnál nagyobb egyéni viselkedést tartalmaznak.

A React természete arra ösztönzi Önt, hogy a kezelőfelület újrafelhasználható aspektusait különítse el az egyes összetevőkből. Az összetevőket általában a saját forrásfájljaikban definiálják, így a kódbázis könnyebben navigálható és rendszerezhető.

import React from "react";
import ReactDOM from "react-dom";
 
class ChildComponent extends React.Component {
 
    render() {
        return <h2>Child Component</h2>;
    }
 
}
 
class DemoComponent extends React.Component {
 
    render() {
        return (
            <div>
                <h1>Demo Component</h1>
                <ChildComponent />
            </div>
        );
    }
 
}
 
ReactDOM.render(<DemoComponent />, document.body);

Az összetevők tartalmazhatnak más összetevőket is a komplex felhasználói felületek gyors felépítésének lehetővé tétele érdekében. Egyetlen összetevő megjeleníthet bizonyos felhasználói felületet, egyéni CSS-stílusokat alkalmazhat és kezelheti a JavaScript-alapú felhasználói interakciókat. A React egy egyedi sablonnyelvet, a JSX-t használ, hogy lehetővé tegye a komponens felhasználói felületek felépítését a szokásos HTML-hez hasonló stílusban.

Keresse meg az Állapotos szakaszokat

A React kiválóan kezeli a kezelőfelület azon területeit, amelyek valamilyen belső állapot értékétől függően eltérő módon jelennek meg. Az „állam” gondolata eleinte homályosnak tűnhet. Könnyű azonban azonosítani webhelyének állapotfontosságú szakaszait – ezek általában azok a területek, amelyek változásokat okoznak a felhasználói felületen belül.

Ilyenek például az űrlapbevitel értéke, a váltógomb kiválasztása és a dinamikusan betöltött tartalom betöltési állapota. Maga a tartalom gyakran „állapotosan” kerül kiszállításra – egy általános blogbejegyzési képernyőn az alkatrész belső állapotában tárolt cikkadatok jelennek meg.

Az alábbi példában a képernyőn megjelenő szöveget a demo kulcs a komponens állapotában. A szöveg öt másodpercenként automatikusan megváltozik az állapot frissítésével.

import React from "react";
import ReactDOM from "react-dom";
 
class DemoComponent extends React.Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
 
            demo: 1
 
        };
 
        this.timer = null;
 
        this.updateText = this.updateText.bind(this);
 
    }
 
    componentDidMount() {
        this.timer = setInterval(this.updateText, 5000);
    }
 
    componentWillUnmount() {
        if (this.timer) clearInterval(this.timer);
    }
 
    updateText() {
        this.setState({demo: (this.state.demo + 1)})
    }
 
    render() {
        return <h1>{this.state.demo}</h1>;
    }
 
}
 
ReactDOM.render(<DemoComponent />, document.body);

Próbálja meg megtalálni webhelyének azokat a területeit, amelyeknek dinamikusan változtatniuk kell. Ennek oka lehet egy felhasználói művelet, egy ismétlődő időzítő vagy egy böngésző eseménye (például offline módba lépés vagy új háttéradatok lekérése).

Bármely állapotszerű szakasz, amelyet rendszeresen frissítenek, valószínűleg részesülni fog a React használatából. A React zökkenőmentes állapotkezelése egyetlen igazságforrást nyújt webhelye üzleti logikájához.

Az interaktivitás azonosítása

A React egyszerűbbé teheti az interaktivitás kezelését a webhelyén belül. A könyvtár absztrakcióval készíti el a JavaScript beépített eseménykezelőit, hogy egységes felületet biztosítson a felhasználói interakciók megválaszolásához.

A React használata különösen előnyös lehet komplex formák esetén. Azon alapuló megközelítése „Ellenőrzött alkatrészek”, biztosítja, hogy az űrlap belső állapota megegyezzen azzal, amit a felhasználó lát a felhasználói felületen.

import React from "react";
import ReactDOM from "react-dom";
 
class DemoComponent extends React.Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
 
            value: "I'm a text field"
 
        };
 
        this.updateValue = this.updateValue.bind(this);
 
    }
 
    updateValue(e) {
        this.setState({value: e.target.value});
    }
 
    render() {
        return <input onChange={this.updateValue} value={this.state.value} />;
    }
 
}
 
ReactDOM.render(<DemoComponent />, document.body);

Ha eseménykezelőket csatol az űrlapvezérlőkhöz, frissítheti az összetevők állapotát, amikor a felhasználó megváltoztatja a vezérlő értékét – például beírhatja a szövegmezőbe, vagy kiválaszthat egy lehetőséget a legördülő menüből. Ezután végezze el a vezérlést value prop (amely a HTML-hez társul value attribútum) utaljon vissza az összetevő állapotára. A felhasználói felület és az összetevő változásai most tükröződni fognak egymásban.

Keresse meg a DOM manipulációt

Ez az aranyszabály, amelyet figyelembe kell venni a React használatának eldöntésekor. Az állapotszerű tartalom, a felhasználói interaktivitás és az összetevők dinamikus frissítése visszacsatol a DOM-ba. A böngésző JavaScript API-jaival történő közvetlen DOM-manipuláció a legjobb esetben esetlen, a legrosszabb esetben pedig lidércesen nehézkes.

Webhelyének bármely olyan aspektusa, amely a DOM kiterjedt manipulációját igényli – ez az oldalon megjelenő HTML elemek -, valószínűleg a bonyolultság forrása. A React nagyban leegyszerűsítheti ezeket a forgatókönyveket. Komponens-alapú jellege elvonja a HTML injektálásának és az eseménykötések kezelésének unalmát.

Mivel a React deklaratív, meghatározza, hogy a DOM hogyan nézzen ki egy komponensen belül render() módszer. Ezután a könyvtár a HTML-elemek létrehozásával, eltávolításával és keverésével végzi a kemény munkát a „deklarált” DOM-struktúra előállításához.

A React fenntartja a sajátját „Virtuális DOM” amely biztosítja, hogy ez az egész eljárás eredményesen fut. Ez lehetővé teszi a könyvtár számára, hogy a lehető legkevesebb újraterhelést hajtsa végre, minimalizálva a DOM-manipulációhoz általában társuló általános költségeket.

Következtetés

A React népszerűsége az államigazgatás és az általa biztosított DOM-manipuláció jelentős egyszerűsítéséből fakad. Deklaratív jellege lehetővé teszi a rendkívül összetett webalkalmazások építését az alapvető HTML-oldalakhoz hasonló módon, a fejlesztőknek csak azt kell meghatározniuk, hogy a DOM-szerkezet hogyan nézzen ki az aktuális időpontban.

Mint minden jó dolognál, vannak hátrányai is. A React használata növeli a webhely letöltési méretét. Emellett a JavaScript-re támaszkodik, amely megakadályozhatja egyes felhasználók hozzáférését a tartalmához. Sokkal több meghibásodási pont van, mint egy „tiszta” HTML, CSS és JavaScript megoldás.

Ezek a korlátozások azt jelentik, hogy a React nem biztos, hogy a legjobb választás az egyszerű statikus weboldalakhoz. A kevés interaktivitású és korlátozott DOM-manipulációval rendelkező webhelyek általában jobban járnak, ha ragaszkodnak egy könnyebb megoldáshoz. A React előnyei valóban megtérülnek azokon a helyszíneken, amelyek jelentős belső állapotúak. A React javítja a fejlesztői termelékenységet, a kódbázis karbantarthatóságát és a webhely általános teljesítményét, ha gondosan használják őket adatközpontú interaktív helyeken.