ComponentDidUpdate() gebruiken in React - Gids voor ontwikkelaars

Elke component in React heeft een levenscyclus die kan worden gecontroleerd en gemanipuleerd. Deze levenscycli kunnen worden onderverdeeld in drie hoofdfasen, namelijk Mounting, Updating en Unmounting.

De montage of geboorte van een React-component start de levenscyclus van de component. Dit is de fase waarin we de toestand van de toepassing configureren en de UI weergeven. In deze fase worden onze props gedefinieerd. De methoden die tijdens de mounting-fase worden gebruikt, zijn constructor(), render(), componentDidMount() en getDerivedStateFromProps().

Na de geboorte van de component in de montagefase is de toepassing klaar voor de Updating-fase. In deze fase worden gegevensupdates ontvangen en acties van gebruikers uitgevoerd. Updating Methods omvatten shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() en componentDidUpdate(). Een component wordt gezegd bijgewerkt te zijn wanneer er een verandering optreedt in de status of props.

De Unmounting, ook bekend als de dood van een React component, is de fase waarin onze component wordt verwijderd uit het DOM. De methode die in deze fase wordt gebruikt is de methode componentwillUnmount()

In dit artikel gaan we dieper in op componentDidUpdate(), een van de methodes in de Updating-fase.

Wat is de methode componentDidUpdate()?

De methode componentDidUpdate() is een updatemethode die wordt aangeroepen na de methode componentDidMount() en dit gebeurt onmiddellijk na een update en niet voor de initiële render.

Er moet worden opgemerkt dat het niet helemaal 100% waar en correct is om te zeggen dat componentDidUpdate() wordt aangeroepen na componentDidMount().

De componentDidMount() wordt aangeroepen in de Mounting fase, terwijl de componentDidUpdate() wordt aangeroepen in de Updating fase. Dit betekent dat sommige methodes zoals getSnapshotBeforeUpdate() aangeroepen kunnen worden tussen componentDidMount() en componentDidUpdate(). De update kan plaatsvinden wanneer een statusmutatie plaatsvindt of wanneer er wijzigingen zijn aan props.

Telkens wanneer er een mutatie of wijziging gebeurt, krijgt de methode componentDidUpdate() de vorige status en de vorige props als argumenten. Door de vorige status en vorige props als argumenten te krijgen, kunnen we met deze methode controleren of aan een voorwaarde is voldaan en vervolgens een specifieke actie uitvoeren als de controle waar is.

De syntaxis van deze methode is:

componentDidUpdate(prevProps, prevState) {
 if (this.props.data !== prevProps.data) {
   console.log(this.props.data);
 }
}

Meestal en in zeldzame gevallen wordt de methode componentDidUpdate() aangeroepen na de methode getSnapshotBeforeUpdate() en wanneer dit gebeurt, wordt een derde argument -snapshot- doorgegeven aan de methode componentDidUpdate():

componentDidUpdate(prevProps, prevState, snapshot) {
 if (this.props.data !== prevProps.data) {
   console.log(this.props.data);
 }
}

Hoe de methode componentDidUpdate() "niet" te gebruiken

Je mag geen niet-aangevinkte status instellen in de methode componentDidUpdate(). Hieronder zie je een voorbeeld van een niet-aangevinkte status:

componentDidUpdate(prevProps, prevState) {
  let value = this.props.data;
  this.setState({ isUpdated: false });// VERY BAD: DO NOT DO THIS!!!
}

De reden hiervoor is dat als we de bovenstaande code zouden gebruiken, we in een oneindige renderlus terecht zouden komen omdat we eerst renderen en dan update oproepen, die vervolgens de status instelt en zo een nieuwe render activeert, enzovoort.

De oplossing hiervoor is om je toestand in voorwaardelijke verklaringen te verpakken en dan alleen de toestand in specifieke gebieden te veranderen, zoals we in het onderstaande voorbeeld zullen zien:

componentDidUpdate(prevProps, prevState) {
  let value = this.props.data;
  if (this.state.value === value){
  this.setState({ value: '' });// A possible fix!!!
  }
}

Voorbeelden van componentDidUpdate()

In het onderstaande voorbeeld hebben we een klikhandler die wordt geactiveerd wanneer er op een knop wordt geklikt in de toepassing, die vervolgens de status van de geklikte knop verandert in het tegenovergestelde van de huidige status.

import React from 'react';
class Counter extends React.Component {
  state = {
    clicked: false,
  };

  buttonPress = () => {
    this.setState({
      clicked: !this.state.clicked,
    });
  };
  componentDidUpdate(prevProps, prevState) {
    prevState.clicked === this.state.clicked
      ? console.log('same state')
      : console.log('changed clicked state');
  }
  render() {
    return (
      <React.Fragment>
        <button
          style={{
            margin: 'auto',
            width: '50%',
            padding: 20,
            marginTop: '10%',
            border: 'solid 1px black',
            textAlign: 'center',
            fontSize: 18,
            color: 'black',
            cursor: 'pointer',
          }}
          onClick={this.buttonPress}
        >
          Click me
        </button>
      </React.Fragment>
    );
  }
}
export default Counter;

In het bovenstaande voorbeeld zien we dat de methode componentDidUpdate() de vorige status als parameter krijgt en dan controleert of de vorige status dezelfde is als de huidige status van aangeklikt en dan het juiste bericht naar de console logt. Als de status niet was bijgewerkt, zou dat bericht anders zijn.

Gebruikscases van de methode componentDidUpdate()

Werken met het DOM

Een van de manieren waarop we gebruik kunnen maken van de componentDidUpdate() method is wanneer we met het DOM werken. Aangezien de methode componentDidUpdate() wordt aangeroepen na de Mounting-fase, betekent dit dat we er ook DOM-knooppunten in kunnen benaderen. We kunnen de methode gebruiken om op de DOM te werken wanneer de component is bijgewerkt, zoals we in het onderstaande voorbeeld kunnen zien:

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 39 };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ counter: 39 + 4 });
    }, 2000);
  }
  componentDidUpdate(prevState, prevProps) {
    if (prevState !== this.state) {
      document.getElementById('mydiv').innerHTML =
        'The updated counter is ' + this.state.counter;
    }
  }
  render() {
    return (
      <div>
        <h1>My counter says: {this.state.counter}</h1>
        <div id="mydiv"></div>
      </div>
    );
  }
}
export default Counter;

In het bovenstaande voorbeeld zien we de Mounting- en Updating-fase van onze componentlevenscyclus. We hebben de toestand van onze toepassing aangemaakt, vervolgens de methode componentDidMount() aangeroepen, onze toestand bijgewerkt en vervolgens een time-out ingesteld zodat we de levenscyclus van onze component kunnen bijhouden. De methode componentDidUpdate() werd aangeroepen na de methode componentDidMount(). Hierin kregen we onze vorige status en vorige props als argumenten. Daarna controleerden we of de vorige status niet gelijk is aan de huidige status. Als de voorwaarde waar is, openen we de DOM en stellen we de binnenste HTML van de div in op een bericht naar keuze.

Gegevens ophalen van server / API-oproepen

Een ander gebruik voor de methode componentDidUpdate() is het doen van serveroproepen of het bevragen van een API endpoint. De reden waarom deze methode hiervoor nuttig is, is omdat het meer gegevens ophaalt zonder de pagina te verversen, na de initiële ophaling bij het laden van de pagina.

import React from 'react';
class Counter extends React.Component {
  // The first state lives here 
}

class ProjectsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { projects: [] };
  }
  // Emulates fetching data from server, data is returned after 300 ms timeout
  fetch = (person) => {
    setTimeout(() => {
      this.setState({
        projects:
          person === 'Isaac'
            ? ['Create a dashboard with React', 'Play Monopoly with friends']
            : [
                'Work on a project with Isaac',
                'Win a game of chess against a grandmaster',
              ],
      });
    }, 300);
  };
  componentDidUpdate(prevProps, prevState) {
    // check whether person has changed
    if (prevProps.person !== this.props.person) {
    // fetch if the person has changed
      this.fetch(this.props.person);
    }
  }
  render() {
    // render a list of projects
    return (
      
    );
  }
}
export default Counter;

Hieronder staat een link naar een codesandbox met de volledige code:

tps://codesandbox.io/s/blissful-breeze-w12rps

In het bovenstaande voorbeeld hebben we een fetch-functie gemaakt die het gebruik van fetch of axios emuleert. In de methode componenDidUpdate() controleren we of de naam van de persoon is gewijzigd door de vorige props te vergelijken met de huidige props. Als de naam van de persoon is gewijzigd, vragen we een lijst met projecten op en werken we de status van de component bij met de projecten.

Het moet worden opgemerkt dat we de interne toestand van de component niet bijwerken om een oneindige updatelus te vermijden en daarom controleren we de naam van de persoon in props om dat te vermijden.

Conclusie

In dit artikel hebben we goed gekeken naar de methode componentDidUpdate, de eigenaardigheden, voorbeelden en use cases. We hebben ook gekeken naar slechte praktijken bij het werken met de componentDidUpdate method en oplossingen daarvoor. Ik hoop dat dit artikel antwoorden geeft op vragen die je misschien hebt over de methode componentDidUpdate() en tegelijkertijd een beter begrip geeft van hoe het werkt.