React
React Component-levenscyclus

Invoering

Componenten maken

Wanneer een React-component wordt gemaakt, worden een aantal functies genoemd:

• Als u React.createClass (ES5) gebruikt, worden 5 door de gebruiker gedefinieerde functies aangeroepen
• Als u class Component extends React.Component (ES6) gebruikt, worden 3 door de gebruiker gedefinieerde functies aangeroepen

getDefaultProps() (alleen ES5)

Dit is de eerste methode die wordt genoemd.

Propwaarden die door deze functie worden geretourneerd, worden als standaardwaarden gebruikt als ze niet zijn gedefinieerd wanneer de component wordt geïnstantieerd.

In het volgende voorbeeld wordt this.props.name standaard ingesteld op Bob tenzij anders aangegeven:

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

getInitialState() (alleen ES5)

Dit is de tweede methode die wordt genoemd.

De retourwaarde van getInitialState() definieert de begintoestand van de component React. Het React-framework roept deze functie aan en wijst de retourwaarde toe aan this.state .

In het volgende voorbeeld wordt this.state.count met de waarde van this.props.initialCount :

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

componentWillMount() (ES5 en ES6)

Dit is de derde methode die wordt genoemd.

Deze functie kan worden gebruikt om de laatste wijzigingen aan het onderdeel aan te brengen voordat het aan de DOM wordt toegevoegd.

componentWillMount() {
  ...
}

render() (ES5 en ES6)

Dit is de vierde methode die wordt genoemd.

De functie render() moet een pure functie zijn van de status en de rekwisieten van de component. Het retourneert een enkel element dat de component vertegenwoordigt tijdens het weergaveproces en moet een weergave zijn van een native DOM-component (bijvoorbeeld <p /> ) of een samengestelde component. Als er niets moet worden weergegeven, kan dit null of undefined .

Deze functie wordt opgeroepen na elke wijziging in de rekwisieten of de status van de component.

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

componentDidMount() (ES5 en ES6)

Dit is de vijfde methode die wordt genoemd.

De component is gemonteerd en u hebt nu toegang tot de DOM-knooppunten van de component, bijvoorbeeld via refs .

Deze methode moet worden gebruikt voor:

• Timers voorbereiden
• Data ophalen
• Gebeurtenisluisteraars toevoegen
• DOM-elementen manipuleren

componentDidMount() {
  ...
}

ES6-syntaxis

Als de component is gedefinieerd met behulp van de syntaxis van de ES6-klasse, kunnen de functies getDefaultProps() en getInitialState() niet worden gebruikt.

In plaats daarvan declareren we onze defaultProps als een statische eigenschap van de klasse en declareren we de vorm van de staat en de initiële status in de constructor van onze klasse. Beide worden ingesteld op het exemplaar van de klasse tijdens de bouw, voordat een andere React-levenscyclusfunctie wordt aangeroepen.

Het volgende voorbeeld demonstreert deze alternatieve aanpak:

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

getDefaultProps() vervangen getDefaultProps()

Standaardwaarden voor de componentprops worden opgegeven door de eigenschap defaultProps van de klasse in te stellen:

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

getInitialState() vervangen

De idiomatische manier om de begintoestand van de component in te stellen, is om this.state in te stellen in de constructor:

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}

Component update

componentWillReceiveProps(nextProps)

Dit is de eerste functie die wordt gebruikt voor het wijzigen van eigenschappen .

Wanneer de eigenschappen van de component veranderen , roept React deze functie aan met de nieuwe eigenschappen . Je hebt toegang tot de oude rekwisieten met this.props en tot de nieuwe rekwisieten met nextProps .

Met deze variabelen kunt u enkele vergelijkingshandelingen uitvoeren tussen oude en nieuwe rekwisieten, of de functie aanroepen omdat een eigenschap verandert, enz.

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

shouldComponentUpdate(nextProps, nextState)

Dit is de tweede functie die wordt opgeroepen voor eigenschappenwijzigingen en de eerste voor statuswijzigingen .

Als een ander component / uw component een eigenschap / status van uw component wijzigt, zal React standaard een nieuwe versie van uw component weergeven. In dit geval retourneert deze functie altijd true.

U kunt deze functie overschrijven en nauwkeuriger kiezen of uw component moet worden bijgewerkt of niet .

Deze functie wordt meestal gebruikt voor optimalisatie .

In het geval dat de functie false retourneert, stopt de updatepijplijn onmiddellijk .

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

componentWillUpdate(nextProps, nextState)

Deze functie werkt als componentWillMount() . Wijzigingen staan niet in DOM , dus u kunt enkele wijzigingen aanbrengen net voordat de update wordt uitgevoerd.

/! \: u kunt this.setState () niet gebruiken.

componentWillUpdate(nextProps, nextState){}

render()

Er zijn enkele wijzigingen, dus geef de component opnieuw op.

componentDidUpdate(prevProps, prevState)

Hetzelfde als componentDidMount() : DOM is vernieuwd , dus u kunt hier wat werk aan de DOM doen.

componentDidUpdate(prevProps, prevState){}

Component verwijderen

componentWillUnmount()

Deze methode wordt aangeroepen voordat een component wordt losgekoppeld van de DOM.

Het is een goede plek om reinigingswerkzaamheden uit te voeren, zoals:

• Gebeurtenisluisteraars verwijderen.
• Timers wissen.
• Stopcontacten stoppen.
• Redux-staten opruimen.

componentWillUnmount(){
  ...
}

Een voorbeeld van het verwijderen van bijgevoegde gebeurtenislistener in componentWillUnMount

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}

React Component Container

Bij het bouwen van een React-toepassing is het vaak wenselijk om componenten op basis van hun primaire verantwoordelijkheid te verdelen in presentatie- en containercomponenten.
Presentatiecomponenten houden zich alleen bezig met het weergeven van gegevens - ze kunnen worden beschouwd als en worden vaak geïmplementeerd als functies die een model omzetten in een weergave. Doorgaans behouden ze geen interne status. Containercomponenten houden zich bezig met het beheer van gegevens. Dit kan intern worden gedaan via hun eigen staat, of door op te treden als intermediair met een staatsbibliotheek zoals Redux. De containercomponent geeft niet direct gegevens weer, maar geeft de gegevens door aan een presentatiecomponent.

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}

Lifecycle methodeaanroep in verschillende staten

Dit voorbeeld dient als aanvulling op andere voorbeelden die gaan over het gebruik van de levenscyclusmethoden en wanneer de methode wordt aangeroepen.

Dit voorbeeld vat samen welke methoden (componentWillMount, componentWillReceiveProps, enz.) Worden aangeroepen en in welke volgorde voor een component in verschillende toestanden anders zal zijn :

Wanneer een component wordt geïnitialiseerd:

1. getDefaultProps
2. getInitialState
3. componentWillMount
4. geven
5. componentDidMount

Wanneer de status van een component is gewijzigd:

1. shouldComponentUpdate
2. componentWillUpdate
3. geven
4. componentDidUpdate

Wanneer een component rekwisieten heeft gewijzigd:

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. geven
5. componentDidUpdate

Wanneer een component wordt verwijderd:

1. componentWillUnmount