reageer.Component

deze pagina bevat een gedetailleerde API referentie voor de React component klasse definitie. Het veronderstelt dat u vertrouwd bent met fundamentele react-concepten, zoals componenten en rekwisieten, evenals staat en levenscyclus. Zo niet, lees ze dan eerst.

overzicht

React laat u componenten definiëren als klassen of functies. Componenten gedefinieerd als klassen bieden momenteel meer functies die in detail worden beschreven op deze pagina. Om een react componentklasse te definiëren, moet u React.Componentuitbreiden:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}

de enige methode die u moet definiëren in een React.Component subklasse wordt render()genoemd. Alle andere op deze pagina beschreven methoden zijn optioneel.

we raden ten zeerste aan om geen eigen basiscomponentklassen te maken. In React componenten wordt code hergebruik voornamelijk bereikt door compositie in plaats van overerving.

opmerking:

React dwingt u niet om de syntaxis van de ES6-klasse te gebruiken. Als u het liever vermijdt, kunt u in plaats daarvan de create-react-class module of een soortgelijke aangepaste abstractie gebruiken. Bekijk het gebruik van React without ES6 voor meer informatie.

de Component Lifecycle

elk onderdeel heeft verschillende” lifecycle methods ” die u op bepaalde momenten in het proces kunt overschrijven om code uit te voeren. U kunt dit levenscyclusdiagram gebruiken als een spiekbriefje. In de onderstaande lijst zijn veelgebruikte levenscyclusmethoden vetgedrukt. De rest bestaat voor relatief zeldzame gebruiksgevallen.

Aankoppelen

Deze methoden worden genoemd in de volgende volgorde wanneer een exemplaar van een component wordt gemaakt en ingevoegd in de DOM:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Nb:

Deze methoden zijn als verouderd beschouwd en je moet voorkomen dat ze in de nieuwe code in:

• UNSAFE_componentWillMount()

Bijwerken

Een update kan worden veroorzaakt door veranderingen rekwisieten of staat. Deze methoden worden genoemd in de volgende volgorde wanneer een component wordt opnieuw weergegeven:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Opmerking:

Deze methoden zijn als verouderd beschouwd en je moet voorkomen dat ze in de nieuwe code:

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

Ontkoppelen

Deze methode wordt aangeroepen wanneer een component wordt verwijderd van de DOM:

• componentWillUnmount()

Fout Afhandeling

Deze methoden worden aangeroepen wanneer er een fout is opgetreden tijdens het renderen, in een lifecycle-methode, of in de constructor van een kind component.

• static getDerivedStateFromError()
• componentDidCatch()

andere API ’s

elk onderdeel biedt ook enkele andere API’ s:

• setState()
• forceUpdate()

Klasse-Eigenschappen

• defaultProps
• displayName

– Instance Eigenschappen

• props
• state

Referentie

Algemeen Gebruikt Levenscyclus Methodes

De methoden in dit hoofdstuk betreffen de overgrote meerderheid van de use cases die u zult tegenkomen creëren Reageren onderdelen. Voor een visuele referentie, kijk op dit levenscyclusdiagram.

render ()

render()

de render() methode is de enige vereiste methode in een klasse-component.

wanneer deze wordt aangeroepen, moet this.props en this.state worden onderzocht en een van de volgende typen worden geretourneerd:

• React elements. Meestal gemaakt via JSX. Bijvoorbeeld, <div /> en <MyComponent /> zijn React-elementen die React instrueren om respectievelijk een DOM-node of een ander door de gebruiker gedefinieerd onderdeel te maken.
• Arrays en fragmenten. Laat u meerdere elementen van render. Zie de documentatie over fragmenten voor meer details.
• Portals. Laat je kinderen maken in een andere DOM subtree. Zie de documentatie over portals voor meer informatie.
• tekenreeks en getallen. Deze worden weergegeven als tekstknooppunten in de DOM.
• Booleans or null. Render niets. (Bestaat meestal om return test && <Child /> patroon te ondersteunen, waarbij test Booleaans is.)

de functie render() moet zuiver zijn, wat betekent dat de component status niet wordt gewijzigd, het geeft hetzelfde resultaat elke keer dat het wordt aangeroepen, en het heeft geen directe interactie met de browser.

Als u met de browser wilt communiceren, voer dan uw werk uit in componentDidMount() of in de andere levenscyclusmethoden. Het behouden van render() pure maakt het makkelijker om over componenten na te denken.

Note

render() zal niet worden aangeroepen als shouldComponentUpdate() geeft false terug.

constructor()

constructor(props)

Als u de status niet initialiseert en geen bindmethoden gebruikt, hoeft u geen constructor te implementeren voor uw react-component.

de constructor voor een React component wordt aangeroepen voordat het aangekoppeld wordt. Bij het implementeren van de constructor voor een React.Component subklasse, moet u super(props) aanroepen voor enig ander statement. Anders zal this.props niet gedefinieerd zijn in de constructor, wat kan leiden tot bugs.

gewoonlijk worden constructors in React alleen gebruikt voor twee doeleinden:

• initialiseren van lokale status door een object toe te wijzen aan this.state.
• bind event handler methoden aan een instantie.

u mag setState() niet aanroepen in de constructor(). In plaats daarvan, als uw component lokale status moet gebruiken, wijs de initiële status toe aan this.state direct in de constructor:

constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}

Constructor is de enige plaats waar u this.state direct moet toewijzen. In alle andere methoden moet u this.setState() gebruiken.

vermijd het introduceren van bijwerkingen of abonnementen in de constructor. Voor die use cases, gebruik componentDidMount() in plaats daarvan.

Note

vermijd het kopiëren van rekwisieten naar status! Dit is een veel voorkomende fout:

constructor(props) { super(props); // Don't do this! this.state = { color: props.color };}

het probleem is dat het zowel onnodig is (u kunt this.props.color direct gebruiken in plaats daarvan), en fouten maakt (updates van de color prop zullen niet worden weergegeven in de status).

gebruik dit patroon alleen als u opzettelijk prop-updates wilt negeren. In dat geval is het zinvol om de prop te hernoemen naar initialColor of defaultColor. U kunt een component vervolgens dwingen zijn interne toestand te “resetten”door zijn key indien nodig te wijzigen.

Lees onze blogpost over het vermijden van afgeleide status om te leren over wat te doen als je denkt dat je een bepaalde status nodig hebt om afhankelijk te zijn van de rekwisieten.

componentDidMount()

componentDidMount()

componentDidMount() wordt onmiddellijk aangeroepen nadat een component is aangekoppeld (ingevoegd in de boom). Initialisatie die DOM-knooppunten vereist moet hier gaan. Als u gegevens van een extern eindpunt moet laden, is dit een goede plek om de netwerkaanvraag te instantiëren.

Deze methode is een goede plek om abonnementen in te stellen. Als u dat doet, vergeet dan niet om u uit te schrijven in componentWillUnmount().

u kunt setState() onmiddellijk aanroepen in componentDidMount(). Het zal leiden tot een extra rendering, maar het zal gebeuren voordat de browser updates van het scherm. Dit garandeert dat, hoewel de render() in dit geval tweemaal zal worden aangeroepen, de gebruiker de tussenliggende status niet zal zien. Gebruik dit patroon met de nodige voorzichtigheid omdat het vaak problemen met de prestaties veroorzaakt. In de meeste gevallen zou u de initiële status in de constructor() moeten kunnen toewijzen. Het kan echter nodig zijn voor gevallen zoals modals en tooltips wanneer u een DOM-knooppunt moet meten voordat u iets rendert dat afhankelijk is van de grootte of positie.

componentDidUpdate ()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() wordt onmiddellijk na het bijwerken aangeroepen. Deze methode wordt niet aangeroepen voor de initiële render.

Gebruik dit als een mogelijkheid om op het DOM te werken wanneer het onderdeel is bijgewerkt. Dit is ook een goede plek om netwerkverzoeken te doen, zolang je de huidige props vergelijkt met eerdere props (bijv. een netwerk verzoek kan niet nodig zijn als de rekwisieten niet zijn veranderd).

componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}

componentWillUnmount()

shouldComponentUpdate(nextProps, nextState)

static getDerivedStateFromProps(props, state)

getSnapshotBeforeUpdate(prevProps, prevState)

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> ); }}

static getDerivedStateFromError(error)

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; }}

componentDidCatch(error, info)

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; }}

UNSAFE_componentWillMount()

UNSAFE_componentWillReceiveProps(nextProps)

UNSAFE_componentWillUpdate(nextProps, nextState)

setState(updater, )

(state, props) => stateChange

this.setState((state, props) => { return {counter: state.counter + props.step};});

setState(stateChange)

this.setState({quantity: 2})

Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)

this.setState((state) => { return {quantity: state.quantity + 1};});

component.forceUpdate(callback)

class CustomButton extends React.Component { // ...}CustomButton.defaultProps = { color: 'blue'};

 render() { return <CustomButton /> ; // props.color will be set to blue }

 render() { return <CustomButton color={null} /> ; // props.color will remain null }