Ez az oldal részletes API hivatkozást tartalmaz a React komponens osztály definíciójához. Feltételezi, hogy ismeri az alapvető React fogalmakat, mint például az összetevők és kellékek, valamint az állapot és az életciklus. Ha nem, olvassa el őket először.
áttekintés
a React lehetővé teszi az összetevők osztályként vagy funkcióként történő meghatározását. Az osztályként definiált összetevők jelenleg több olyan funkciót biztosítanak, amelyeket ezen az oldalon részletesen ismertetünk. Egy React komponens osztály meghatározásához ki kell terjeszteni a React.Component:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }} Az egyetlen módszer, amelyet meg kell határozni a React.Component alosztály neve render(). Az ezen az oldalon leírt összes többi módszer opcionális.
erősen javasoljuk, hogy ne hozzon létre saját alapkomponensosztályokat. A React komponensekben a kód újrafelhasználása elsősorban összetétel, nem pedig öröklés útján valósul meg.
Megjegyzés:
a React nem kényszeríti Önt az ES6 osztály szintaxisának használatára. Ha szeretné elkerülni, használhatja a
create-react-classmodult vagy egy hasonló egyéni absztrakciót. Vessen egy pillantást a React használatára ES6 nélkül, hogy többet megtudjon.
az összetevő életciklusa
minden komponensnek több” életciklus-módszere ” van, amelyeket felülírhat a kód futtatásához a folyamat bizonyos időpontjaiban. Ezt az életciklus diagramot csaló lapként használhatja. Az alábbi listában az általánosan használt életciklus-módszerek félkövérrel vannak jelölve. A többiek viszonylag ritka Használati esetekben léteznek.
Szerelési
Ezek a módszerek hivatottak, a következő sorrendben, amikor egy esetben egy komponens létre, majd illeszteni a DOM:
constructor()static getDerivedStateFromProps()render()componentDidMount()
Megjegyzés:
Ezek a módszerek tartják öröksége, kerülni kell azokat az új kódot:
UNSAFE_componentWillMount()
Frissítése
frissítés okozta változások a kellékeket, vagy az állam. Ezeket a módszereket a következő sorrendben hívják meg, amikor egy komponenst újra renderelnek:
static getDerivedStateFromProps()-
render() componentDidUpdate()
shouldComponentUpdate()
getSnapshotBeforeUpdate()
megjegyzés:
:
UNSAFE_componentWillUpdate()UNSAFE_componentWillReceiveProps()
leválasztása is hasonlóan
Ezt a módszert nevezzük, amikor egy alkatrész, hogy eltávolítják a DOM:
componentWillUnmount()
Hiba-Kezelés
Ezek a módszerek hívott, ha van egy hiba, közben teszi, az életciklus-alapú módszer, vagy a kivitelező minden gyermek alkatrész.
-
static getDerivedStateFromError() componentDidCatch()
Egyéb API-k
minden összetevő más API-kat is biztosít:
setState()forceUpdate()
Class Tulajdonságok
defaultPropsdisplayName
Például Tulajdonságok
propsstate
Hivatkozás
Leggyakrabban Használt Életciklus Módszerek
A módszerek ebben a részben fedezi a túlnyomó többsége használja esetben találkozunk létrehozása Reagálni alkatrészek. Vizuális referenciaként nézze meg ezt az életciklus diagramot.
render ()
render()a render() módszer az egyetlen szükséges módszer egy osztálykomponensben.
ha hívják, meg kell vizsgálnia this.props és this.state és vissza kell adnia a következő típusok egyikét:
- React elements. Általában JSX-en keresztül jön létre. Például:
<div />és<MyComponent />olyan React elemek, amelyek utasítják a React-et egy Dom csomópont vagy egy másik felhasználó által definiált összetevő megjelenítésére. - tömbök és töredékek. Segítségével vissza több elemet render. További részletekért lásd a töredékek dokumentációját.
- portálok. Hagyja, hogy a gyermekeket egy másik DOM altémává tegye. További részletekért lásd a portálok dokumentációját.
- String és számok. Ezek a DOM-ban szöveges csomópontokként jelennek meg.
- logikai vagy
null. Ne csinálj semmit. (Többnyire létezik, hogy támogassareturn test && <Child />minta, aholtestlogikai.)
A render() funkció legyen tiszta, ami azt jelenti, hogy nem módosítja alkatrész állam, visszatér ugyanazt az eredményt minden alkalommal hivatkozott, pedig nem is közvetlenül befolyásolja a böngésző.
ha kapcsolatba kell lépnie a böngészővel, végezze el munkáját a componentDidMount() vagy a többi életciklus módszer helyett. A render() pure tartása megkönnyíti az összetevők gondolkodását.
Megjegyzés
render()nem kerül meghívásra, hashouldComponentUpdate()hamis értéket ad vissza.
kivitelező()
constructor(props)Ha nem inicializálja állami, illetve nem köti módszerek, nem kell, hogy végre egy kivitelező a Reagálnak alkatrész.
a konstruktor egy React komponens hívják, mielőtt fel van szerelve. A React.Component alosztály kivitelezésekor minden más kijelentés előtt hívja a super(props) alosztályt. Ellenkező esetben athis.props nem lesz meghatározva a konstruktorban, ami hibákhoz vezethet.
általában a React konstruktorokban csak két célra használják:
- a helyi állapot inicializálása egy objektum
this.statehozzárendelésével. - eseménykezelő módszerek kötése egy példányhoz.
ne hívja a setState() – t a constructor() – ban. Ehelyett, ha az összetevőnek helyi állapotot kell használnia, rendelje hozzá a kezdeti állapotot this.state közvetlenül a konstruktorhoz:
constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}a konstruktor az egyetlen hely, ahol this.state közvetlenül hozzá kell rendelnie. Minden más módszernél a this.setState() értéket kell használni.
kerülje a mellékhatások vagy előfizetések bevezetését a konstruktorban. Ilyen esetekben használja acomponentDidMount() értéket.
Megjegyzés
kerülje a kellékek állami másolását! Ez egy gyakori hiba:
constructor(props) { super(props); // Don't do this! this.state = { color: props.color };}a probléma az, hogy mindkettő felesleges (használhatja a
this.props.colorközvetlenül helyette), és hibákat hoz létre (frissíti acolorprop nem tükröződik az állapotban).csak akkor használja ezt a mintát, ha szándékosan figyelmen kívül akarja hagyni a kellékfrissítéseket. Ebben az esetben érdemes átnevezni a
initialColorvagydefaultColor. Ezután kényszerítheti az összetevőt, hogy” visszaállítsa ” belső állapotát akeyha szükséges.olvassa el blogbejegyzésünket a származtatott állapot elkerüléséről, hogy megtudja, mit kell tennie, ha úgy gondolja, hogy szüksége van valamilyen államra a kellékektől való függéshez.
componentDidMount()
componentDidMount()componentDidMount()A DOM csomópontokat igénylő inicializálásnak itt kell lennie. Ha távoli végpontról kell betöltenie az adatokat, ez egy jó hely a hálózati kérés példányosítására.
Ez a módszer jó hely az előfizetések beállításához. Ha ezt megteszi, ne felejtse el leiratkozni a componentWillUnmount()alatt.
lehet hívni setState() azonnal componentDidMount(). Extra megjelenítést indít, de ez megtörténik, mielőtt a böngésző frissíti a képernyőt. Ez garantálja, hogy bár a render() ebben az esetben kétszer lesz meghívva, a felhasználó nem látja a közbenső állapotot. Óvatosan használja ezt a mintát, mert gyakran teljesítményproblémákat okoz. A legtöbb esetben képesnek kell lennie a kezdeti állapot hozzárendelésére aconstructor() helyett. Szükség lehet azonban olyan esetekre, mint a modálok és az eszköztippek, amikor meg kell mérni egy DOM csomópontot, mielőtt valamit megjelenítene, ami a méretétől vagy helyzetétől függ.
componentDidUpdate ()
componentDidUpdate(prevProps, prevState, snapshot)componentDidUpdate() A frissítés után azonnal meghívásra kerül. Ez a módszer nem szükséges a kezdeti megjelenítéshez.
használja ezt a lehetőséget arra, hogy a DOM-on működjön, amikor az összetevőt frissítették. Ez egy jó hely a hálózati kérések elvégzésére is, mindaddig, amíg összehasonlítja az aktuális kellékeket a korábbi kellékekkel (pl. előfordulhat, hogy hálózati kérésre nincs szükség, ha a kellékek nem változtak).
componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}lehet hívni setState() azonnal componentDidUpdate() de vegye figyelembe, hogy be kell csomagolni olyan állapotban, mint a fenti példában, vagy akkor okoz egy végtelen hurok. Ez egy extra újbóli megjelenítést is okozna, amely bár nem látható a felhasználó számára, befolyásolhatja az összetevő teljesítményét. Ha megpróbál” tükör ” néhány állam egy prop felülről érkező, fontolja meg a prop közvetlenül helyett. Tudjon meg többet arról, hogy a kellékek államba történő másolása miért okoz hibákat.
Ha az összetevő végrehajtja agetSnapshotBeforeUpdate() életciklus (ami ritka), az érték visszatér kerül át, mint egy harmadik “pillanatkép” paramétercomponentDidUpdate(). Ellenkező esetben ez a paraméter nem lesz meghatározva.
Megjegyzés
componentDidUpdate()nem kerül meghívásra, hashouldComponentUpdate()hamis értéket ad vissza.
componentWillUnmount()
componentWillUnmount()componentWillUnmount() közvetlenül az összetevő leválasztása és megsemmisítése előtt hivatkoznak. Végezzen el minden szükséges tisztítást ebben a módszerben, például az időzítők érvénytelenítését, a hálózati kérések törlését vagy a componentDidMount()alatt létrehozott előfizetések tisztítását.
ne hívja a setState() in componentWillUnmount()-t, mert az összetevő soha nem lesz újra renderelve. Miután egy alkatrészpéldány le van szerelve, soha többé nem lesz felszerelve.
ritkán használt életciklus-módszerek
Az ebben a szakaszban szereplő módszerek nem gyakori használati eseteknek felelnek meg. Néha hasznosak, de a legtöbb alkatrésznek valószínűleg nincs szüksége rájuk. Az alábbi módszerek többségét ezen az életciklus-diagramon láthatja, ha rákattint a tetején található “kevésbé gyakori életciklusok megjelenítése” jelölőnégyzetre.
shouldComponentUpdate ()
shouldComponentUpdate(nextProps, nextState)Use shouldComponentUpdate() annak tudatására, hogy a React kimenetét nem befolyásolja az állapot vagy a kellékek jelenlegi változása. Az alapértelmezett viselkedés az, hogy minden állapotváltozáson újra megjelenítsen, az esetek túlnyomó többségében az alapértelmezett viselkedésre kell támaszkodnia.
shouldComponentUpdate() hivatkoznak megjelenítés előtt, amikor új kellékek vagy állapot érkezik. Alapértelmezésben true. Ez a módszer nem a kezdeti renderelés, vagy haforceUpdate() használják.
Ez a módszer csak teljesítményoptimalizálásként létezik. Ne támaszkodjon rá, hogy “megakadályozza” a renderelést, mivel ez hibákhoz vezethet. Fontolja meg a beépített PureComponent használatát a shouldComponentUpdate() írás helyett kézzel. PureComponent elvégzi a kellékek és az állapot sekély összehasonlítását, és csökkenti annak esélyét, hogy kihagyja a szükséges frissítést.
ha biztos benne, hogy kézzel akarja írni, akkor összehasonlíthatja a this.props és this.statenextStatefalse mondani reagál a frissítés kihagyható. Ne feledje, hogy a false visszaadása nem akadályozza meg a gyermekkomponensek újbóli megjelenítését, amikor állapotuk megváltozik.
nem javasoljuk a mély egyenlőség ellenőrzését vagy a JSON.stringify() használatát shouldComponentUpdate(). Ez nagyon nem hatékony, és károsítja a teljesítményt.
jelenleg, hashouldComponentUpdate()false, akkorUNSAFE_componentWillUpdate()render() éscomponentDidUpdate() div > nem lesz meghívva. A jövőben a React a shouldComponentUpdate()-ot szigorú irányelv helyett célzásként kezelheti, és a false visszaküldése továbbra is az összetevő újbóli megjelenítését eredményezheti.
statikus getDerivedStateFromProps ()
static getDerivedStateFromProps(props, state)getDerivedStateFromProps a render metódus hívása előtt, mind a kezdeti csatoláson, mind a későbbi frissítéseken. Vissza kell adnia egy objektumot az állapot frissítéséhez, vagy null a semmi frissítéséhez.
Ez a módszer ritka esetekben létezik, amikor az állapot a kellékek időbeli változásaitól függ. Például hasznos lehet egy <Transition> összetevő implementálása, amely összehasonlítja a korábbi és a következő gyermekeket, hogy eldöntsék, melyiküket animálják be és ki.
A származtatott állapot bőbeszédű kódhoz vezet, ami megnehezíti az összetevők gondolkodását.Győződjön meg róla, hogy ismeri az egyszerűbb alternatívákat:
- ha a kellékek változására adott válaszként mellékhatást (például adatelérést vagy animációt) kell végrehajtania, használja helyette a
componentDidUpdateéletciklust. - ha néhány adatot csak akkor szeretne újra kiszámítani, ha egy prop megváltozik,használjon memoizációs segítőt.
- ha azt szeretnénk, hogy “reset” néhány állam, amikor a prop változik, úgy, hogy egy komponens teljesen ellenőrzött vagy teljesen ellenőrizetlen egy
keyhelyett.
Ez a módszer nem fér hozzá az alkatrészpéldányhoz. Ha szeretné, újra felhasználhat néhány kódot a getDerivedStateFromProps() és a többi osztálymódszer között úgy, hogy az összetevő kellékek és az osztály definícióján kívüli állapot tiszta funkcióit kibontja.
vegye figyelembe, hogy ez a módszer minden renderre ki van kapcsolva, az októl függetlenül. Ez ellentétben áll a UNSAFE_componentWillReceiveProps-val, amely csak akkor tüzel, ha a szülő újbóli megjelenítést okoz, nem pedig a helyi setStateeredményeként.
getSnapshotBeforeUpdate ()
getSnapshotBeforeUpdate(prevProps, prevState)getSnapshotBeforeUpdate() hivatkoznak közvetlenül azelőtt, hogy a legutóbb megjelenített kimenetet elkötelezték pl. a DOM. Lehetővé teszi az összetevő számára, hogy bizonyos információkat rögzítsen a DOM-ból (például görgetési pozíció), mielőtt potenciálisan megváltozna. Az életciklus által visszaadott bármely érték paraméterként kerül átadásra a componentDidUpdate()értékre.
Ez a használati eset nem gyakori, de előfordulhat az UIs-ben, mint egy csevegőszál, amelynek speciális módon kell kezelnie a görgetési pozíciót.
egy pillanatfelvétel értékét (vagy null) vissza kell adni.
például:
class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); }}a fenti példákban fontos, hogy olvassa el a scrollHeight tulajdonságot a getSnapshotBeforeUpdate mert késések lehetnek a “render” fázisú életciklusok között (például
render) és “commit” fázisú életciklusok (példáulgetSnapshotBeforeUpdateéscomponentDidUpdate).
Hiba határok
Hiba határok Reagálni összetevők fogás JavaScript-hibák bárhol a gyermek alkatrész fa, jelentkezzen azok a hibák, illetve megjelenik egy tartalék UI helyett az összetevő fa, ami lezuhant. A hibahatárok a renderelés során, az életciklus-módszerek során, valamint az alatta lévő egész fa konstruktoraiban hibákat észlelnek.
egy osztálykomponens hibahatárrá válik, ha a static getDerivedStateFromError() vagy componentDidCatch()életciklus metódusokat (vagy mindkettőt) határozza meg. Az állapot frissítése ezekből az életciklusokból lehetővé teszi, hogy rögzítsen egy kezeletlen JavaScript hibát az alábbi fán, majd megjelenítsen egy tartalék UI-t.
csak a hibahatárokat használja a váratlan kivételektől való helyreállításhoz; ne próbálja meg használni őket a vezérlőáramhoz.
további részletekért lásd: hibakezelés a React 16-ban.
Megjegyzés
A hibahatárok csak az alatta lévő komponensekben fognak hibákat a fában. A hibahatár önmagában nem képes hibát észlelni.
static getDerivedStateFromError ()
static getDerivedStateFromError(error)ezt az életciklust egy leszármazott által elkövetett hiba után hívják fel component.It megkapja a hibát, hogy dobták, mint egy paraméter, és vissza kell adnia egy értéket, hogy frissítse állapotban.
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}Megjegyzés
getDerivedStateFromError()a “render” szakaszban hívják, így a mellékhatások nem engedélyezettek.Ezekben az esetekben használja acomponentDidCatch()értéket.
componentDidCatch()
componentDidCatch(error, info)Ez az életciklusa hivatkozni egy hiba után váltott egy leszármazott alkatrész.Kap két paraméterek:
-
error– A hiba, hogy kidobták. -
infocomponentStackkulcs, amely információkat tartalmaz arról, hogy melyik összetevő dobta a hibát.
componentDidCatch() a “commit” fázisban nevezik, így a mellékhatások permitted.It kell használni a dolgokat, mint a naplózási hibák:
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}a React gyártása és fejlesztése kissé eltér a componentDidCatch() hibák kezelésétől.
fejlesztéskor a hibákwindow – ig terjednek, ez azt jelenti, hogy bármelywindow.onerror vagywindow.addEventListener('error', callback) elfogja azokat a hibákat, amelyeket acomponentDidCatch()fogott.
A termelés, hanem a hibák nem buborék, ami azt jelenti, hogy minden őse hiba kezelő csak akkor kap hibák kifejezetten nem fogott componentDidCatch().
Megjegyzés
hiba esetén a
componentDidCatch()– ot asetState– nak hívásával teheti meg, de ez egy későbbi kiadásban elavulttá válik.Használja astatic getDerivedStateFromError()– ot a fallback renderelés kezeléséhez.
Legacy Lifecycle Methods
az alábbi életciklus-metódusok”legacy” – ként vannak megjelölve. Még mindig működnek, de nem javasoljuk, hogy használja őket az új kódban. Ebben a blogbejegyzésben többet megtudhat a régi életciklus-módszerektől való áttérésről.
UNSAFE_componentWillMount ()
UNSAFE_componentWillMount()Megjegyzés
Ez az életciklus korábban
componentWillMount. Ez a név továbbra is működni fog a 17. verzióig. Az összetevők automatikus frissítéséhez használja arename-unsafe-lifecyclescodemod értéket.
UNSAFE_componentWillMount() meghívásra kerül közvetlenül a telepítés előtt. Ez az úgynevezett előtt render(), ezért hívja setState() szinkronban ez a módszer nem indít extra renderelés. Általában aconstructor() használatát javasoljuk az állapot inicializálásához.
kerülje a mellékhatások vagy előfizetések bevezetését ebben a módszerben. Ilyen esetekben használja acomponentDidMount() értéket.
Ez az egyetlen életciklus-módszer, amelyet a kiszolgáló renderelésén hívnak.
UNSAFE_componentWillReceiveProps ()
UNSAFE_componentWillReceiveProps(nextProps)Megjegyzés
Ez az életciklus korábban
componentWillReceiveProps. Ez a név továbbra is működni fog a 17. verzióig. Az összetevők automatikus frissítéséhez használja arename-unsafe-lifecyclescodemod értéket.
Megjegyzés:
Az életciklus módszer gyakran vezet a hibákat, ellentmondásokat
- Ha kell végezni egy mellékhatása (például adatok lekérése, vagy egy animáció) a választ, hogy a változás, a kellékes használja a
componentDidUpdateéletciklus helyett.- ha a
componentWillReceivePropsadatokat csak akkor használta újra, ha egy prop megváltozik, használjon memoizációs segítőt.- ha a
componentWillReceiveProps– ot használta valamilyen állapot “visszaállításához”, amikor egy prop megváltozik, fontolja meg, hogy egy komponens teljesen ellenőrzött vagy teljesen ellenőrizetlen legyen akeyhelyett.egyéb felhasználási esetekben kövesse az ebben a blogbejegyzésben szereplő ajánlásokat a származtatott állapotról.
UNSAFE_componentWillReceiveProps() hivatkoznak, mielőtt egy szerelt alkatrész új kellékeket kap. Ha a prop változásokra adott válaszként (például a visszaállításhoz) frissíteni kell az állapotot, akkor összehasonlíthatja a this.props és állapotátmeneteket a this.setState() használatával ebben a módszerben.
vegye figyelembe, hogy ha egy szülőösszetevő az összetevő újbóli megjelenítését okozza, akkor ezt a módszert akkor is meghívják, ha a kellékek nem változtak. Feltétlenül hasonlítsa össze az aktuális és a következő értékeket, ha csak a módosításokat szeretné kezelni.
a React nem hívja a UNSAFE_componentWillReceiveProps() – t a kezdeti kellékekkel a szerelés során. Csak akkor hívja ezt a módszert, ha az alkatrész kellékei frissíthetnek. A this.setState() hívás általában nem váltja ki a UNSAFE_componentWillReceiveProps()értéket.
UNSAFE_componentWillUpdate ()
UNSAFE_componentWillUpdate(nextProps, nextState)Megjegyzés
Ez az életciklus korábban
componentWillUpdate. Ez a név továbbra is működni fog a 17. verzióig. Az összetevők automatikus frissítéséhez használja arename-unsafe-lifecyclescodemod értéket.
UNSAFE_componentWillUpdate() meghívásra kerül közvetlenül a megjelenítés előtt, amikor új kellékek vagy állapot érkezik. Használja ezt a lehetőséget arra, hogy előkészítést végezzen a frissítés előtt. Ez a módszer nem szükséges a kezdeti megjelenítéshez.
Megjegyezzük, hogy nem hívhatja this.setState() ide; sem kell mást csinálni (pl. diszpécser egy Redux akció), ami kiválthatná frissítés egy Reagálni, alkatrész, mielőtt UNSAFE_componentWillUpdate() visszatér.
általában ez a módszer helyettesíthető componentDidUpdate(). Ha a DOM-ból olvastál ebben a módszerben (például egy görgetési pozíció mentéséhez), akkor ezt a logikát getSnapshotBeforeUpdate() – ra mozgathatod.
Megjegyzés
UNSAFE_componentWillUpdate()nem kerül meghívásra, hashouldComponentUpdate()hamis értéket ad vissza.
Egyéb Api-k
Ellentétben az életciklus fenti módszert (ami Reagálni hívást), az alábbi módszerek a módszerek hívást az alkatrészek.
ezek közül csak kettő létezik: setState() és forceUpdate().
setState ()
setState(updater, )setState() inqueues változások a komponens állapotát, és azt mondja React, hogy ez az összetevő és a gyermekek kell újra renderelni a frissített állapot. Ez az elsődleges módszer a felhasználói felület frissítésére az eseménykezelők és a kiszolgáló válaszai alapján.
Gondolj a setState() parancsra, nem pedig az összetevő frissítésének azonnali parancsára. A jobb érzékelt teljesítmény érdekében a React késleltetheti azt, majd egyetlen lépésben frissíthet több összetevőt. A React nem garantálja, hogy az állami változtatásokat azonnal alkalmazzák.
setState() nem mindig frissíti azonnal az összetevőt. A frissítést későbbre kötheti vagy elhalaszthatja. Ez lehetővé teszi az olvasást this.state közvetlenül a setState() potenciális bukás után. Ehelyett használja a componentDidUpdatevagy a setStatevisszahívást (setState(updater, callback)), amelyek közül bármelyik garantáltan tüzet okoz a frissítés alkalmazása után. Ha az állapotot az előző állapot alapján kell beállítania, olvassa el az alábbi updater argumentumot.
setState() mindig ismételt megjelenítéshez vezet, kivéve, ha shouldComponentUpdate() visszatér false. Ha változékony tárgyak használják, a feltételes renderelés logika nem hajtható végre a shouldComponentUpdate(), hívja setState() csak akkor, ha az új állam eltér a korábbi állami elkerülhető a felesleges újra teszi.
az első argumentum egyupdater függvény az aláírással:
(state, props) => stateChangestate a változás alkalmazásakor az összetevő állapotára való hivatkozás. Nem szabad közvetlenül mutálni. Ehelyett a változásokat úgy kell ábrázolni, hogy egy új objektumot építünk a state és propsbemenet alapján. Tegyük fel például, hogy a props.stepértéket szeretnénk növelni:
this.setState((state, props) => { return {counter: state.counter + props.step};});Bothstate andprops a frissítési funkció által kapott adatok garantáltan naprakészek. Az updater kimenete sekélyen összeolvad a stateértékkel.
a setState() második paramétere egy opcionális visszahívási függvény, amely a setState után kerül végrehajtásra, és az összetevő újra renderelésre kerül. Általában a componentDidUpdate() használatát javasoljuk az ilyen logikához.
opcionálisan átadhat egy objektumot első argumentumként a setState() függvény helyett:
setState(stateChange)Ez elvégzi a stateChange sekély egyesítését az új állapotba, például egy bevásárlókosár beállításához tétel Mennyiség:
this.setState({quantity: 2})Ez a forma a setState() is aszinkron, és több hívás során ugyanabban a ciklusban lehet batched együtt. Például, ha ugyanabban a ciklusban többször is megkísérel növelni egy elemmennyiséget, akkor ez a következővel egyenértékű::
Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)a későbbi hívások felülbírálják a korábbi hívások értékeit ugyanabban a ciklusban, így a mennyiség csak egyszer növekszik. Ha a következő állapot az aktuális állapottól függ, javasoljuk a frissítési függvény űrlap használatát, helyette:
this.setState((state) => { return {quantity: state.quantity + 1};});további részletekért lásd:
- állapot-és életciklus-útmutató
- mélység: mikor és miért vannak
setState()hívások batched? - mélység: miért nem frissül azonnal a
this.state?
forceUpdate ()
component.forceUpdate(callback)alapértelmezés szerint, amikor az összetevő állapota vagy kellékei megváltoznak, az összetevő újra renderelni fog. Ha a render()metódus más adatoktól függ, akkor elmondhatja, hogy a React-nek újra kell rendeznie az összetevőt a forceUpdate() hívásával.
Calling forceUpdate() okoz render() kell hívni az összetevő, kihagyva shouldComponentUpdate(). Ez kiváltja a gyermekkomponensek normál életciklus-módszereit, beleértve az egyes gyermekek shouldComponentUpdate() módszerét. A React továbbra is csak akkor frissíti a DOM-ot, ha a jelölés megváltozik.
általában meg kell próbálnia elkerülni a forceUpdate() minden felhasználását, és csak a this.props és this.state in render().
Class Properties
defaultProps
defaultProps lehet meghatározni, mint egy tulajdonság a komponens osztály maga, hogy az alapértelmezett kellékek az osztály. This is used for undefined props, but not for null props. For example:
class CustomButton extends React.Component { // ...}CustomButton.defaultProps = { color: 'blue'};If props.color is not provided, it will be set by default to 'blue':
render() { return <CustomButton /> ; // props.color will be set to blue }If props.color is set to null, it will remain null:
render() { return <CustomButton color={null} /> ; // props.color will remain null }displayName
The displayName string is used in debugging messages. Általában nem kell kifejezetten beállítania, mert az a függvény vagy osztály nevéből származik, amely meghatározza az összetevőt. Lehet, hogy kifejezetten be szeretné állítani, ha más nevet szeretne megjeleníteni hibakeresési célokra, vagy ha magasabb rendű összetevőt hoz létre, a részletekért lásd: csomagolja a megjelenítési nevet az egyszerű hibakeresés érdekében.
példány tulajdonságok
kellékek
this.props tartalmazza azokat a kellékeket, amelyeket az összetevő hívója definiált. Lásd alkatrészek és kellékek egy bevezetés kellékek.
különösen a this.props.children egy speciális prop, amelyet általában a JSX kifejezésben szereplő gyermekcímkék határoznak meg, nem pedig maga a címke.
állapot
az állapot ezen összetevőre jellemző adatokat tartalmaz, amelyek idővel változhatnak. Az Állapot Felhasználó által definiált, sima JavaScript objektumnak kell lennie.
Ha valamilyen értéket nem használnak megjelenítéshez vagy adatfolyamhoz (például időzítő azonosítóhoz), akkor nem kell azt az állapotba helyeznie. Az ilyen értékeket az összetevő példány mezőjeként lehet meghatározni.
az állapotról és az Életciklusról további információt talál.
Sosem változik this.state közvetlenül, mint hív setState() ezután lehet cserélni a mutáció tett. Treat this.state mintha megváltoztathatatlan lenne.