SPFx Series: Een nadere blik op belangrijke stukken code

Bij het ontwikkelen met SharePoint Framework (SPFx) is het essentieel om de kernstukken code te begrijpen die de levenscyclus en toestand van componenten beheren voor het bouwen van schaalbare, efficiënte en responsieve webonderdelen. SPFx maakt gebruik van React (en andere bibliotheken) voor het bouwen van componenten, wat betekent dat ontwikkelaars vertrouwd moeten zijn met hoe componenten worden aangemaakt, bijgewerkt en van de pagina worden verwijderd.

Elk SPFx-component doorloopt een gedefinieerde levenscyclus, en sleutelmethoden zoals onInit, componentDidMount, setState en getDerivedStateFromProps stellen je in staat te controleren hoe en wanneer je component interactie heeft met de DOM, gegevens ophaalt of reageert op gebruikersinvoer. Weten wanneer en waar je bepaalde logica binnen deze methoden moet plaatsen kan een significante impact hebben op prestaties en onderhoudbaarheid.

OnInit

De functie onInit() is een belangrijke levenscyclusmethode in het SharePoint Framework (SPFx) en wordt uitgevoerd wanneer het webonderdeel wordt geïnitialiseerd. Deze functie wordt gebruikt om de context van de pagina te verkrijgen, zoals de URL van de huidige pagina, de huidige gebruiker en het huidige web, en om de benodigde services te configureren of te initialiseren die vereist zijn voor het webonderdeel. Hier is een voorbeeld van hoe je het in een SPFx-project kunt gebruiken:

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

      protected onInit(): Promise<void> {
        getSP(this.context);
        return super.onInit();
      }
    }

In dit voorbeeld wordt de functie onInit() gebruikt om de PnP-JS-Core-bibliotheek te configureren met de context van het webonderdeel, zodat het kan worden gebruikt om gegevens op te halen van de SharePoint-site waar het webonderdeel wordt weergegeven. Het is belangrijk op te merken dat de functie onInit() een Promise retourneert en dat de functie super.onInit() ook moet worden aangeroepen, omdat deze functie ook wordt gebruikt in de basisklasse van het webonderdeel. Het gebruik van onInit() is optioneel, maar wordt vaak gebruikt als je een ajax-aanroep wilt doen of andere netwerktaken wilt uitvoeren bij het laden van het webonderdeel.

componentDidMount

componentDidMount() is een levenscyclusmethode in React.js en wordt uitgevoerd nadat een component in de DOM is gerenderd. Dit is de beste plek om ajax-aanroepen of andere netwerktaken te starten, omdat we zeker weten dat de component bestaat en effectief wordt weergegeven. Hier is een voorbeeld van hoe je het in een SharePoint Framework (SPFx)-project kunt gebruiken:

    class MyComponent extends React.Component {
      componentDidMount() {
        this.setState({title: "Title"});
      }

      render() {
        return <div>{this.state.title}</div>;
      }
    }

In dit voorbeeld wordt de titel naar de toestand geschreven zodat deze later kan worden weergegeven in de React-component wanneer de component wordt gerenderd en weergegeven.

setState

setState() is een methode in React die wordt gebruikt om de toestand van een component te wijzigen. Wanneer de toestand van een component verandert, wordt de component opnieuw gerenderd en worden de wijzigingen weerspiegeld in de gebruikersinterface.

Het is belangrijk op te merken dat setState() asynchroon is, wat betekent dat het geen directe wijziging aanbrengt in de toestand van de component. In plaats daarvan wordt de nieuwe toestand opgeslagen en wordt een update uitgevoerd nadat React de huidige cyclus van updates heeft voltooid.

Hier is een voorbeeld van hoe je setState() in een SPFx-project kunt gebruiken:

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          count: 0
        };
      }

      handleClick = () => {
        this.setState(prevState => ({
          count: prevState.count + 1
        }));
      };

      render() {
        return (
          <div>
            <button onClick={this.handleClick}>Click me</button>
            <p>You clicked {this.state.count} times</p>
          </div>
        );
      }
    }

In dit voorbeeld heeft de component een toestand genaamd “count” met een beginwaarde van 0. Er is een knop met een “click”-gebeurtenishandler die de functie handleClick() aanroept. Deze functie gebruikt setState() om de toestand van “count” met 1 te verhogen. Wanneer op de knop wordt geklikt, wordt de component opnieuw gerenderd met de nieuwe waarde van “count” en wordt de gebruiker getoond hoe vaak er op de knop is geklikt.

getDerivedStateFromProps

Vervangt de functie componentWillReceiveProps. getDerivedStateFromProps is een statische methode die wordt aangeroepen nadat een component is geïnstantieerd en wanneer het nieuwe props ontvangt. Omdat het een statische methode is, heb je geen toegang tot this binnen deze methode, heb je geen toegang tot andere klassemethoden. In tegenstelling tot componentWillReceiveProps kun je de toestand niet instellen binnen deze methode, dus de enige manier om de toestand bij te werken is door een object te retourneren. Als je geen toestand wilt bijwerken, stuur dan simpelweg null terug.

Zo werkte componentWillReceiveProps vroeger:

    public componentWillReceiveProps(nextProps) {
      if (nextProps.someValue !== this.props.someValue) {
        this.setState({ someState: someValue });
      }
    }

Zo werkt getDerivedStateFromProps:

    public static getDerivedStateFromProps(nextProps, prevState) {
      if (nextProps.someValue !== prevState.someValue) {
        return { someState: nextProps.someValue };
      }
      else return null;
    }

    public componentDidUpdate(prevProps, prevState) {
      if (prevProps.someValue !== this.props.someValue) {
        //Voer hier een bepaalde bewerking uit
        this.setState({ someState: someValue });
        this.classMethod();
      }
    }

Het ontvangt twee parameters: nextProps en prevState. Zoals eerder vermeld, heb je geen toegang tot this binnen deze methode, dus je moet de props in de toestand opslaan om de nextProps te vergelijken met de vorige props. In de bovenstaande code worden nextProps en prevState vergeleken; als beide verschillend zijn, wordt een object geretourneerd om de toestand bij te werken. null wordt geretourneerd om aan te geven dat een toestandsupdate niet vereist is. Als de toestand vervolgens verandert, wordt componentDidUpdate aangeroepen waar we de gewenste bewerkingen kunnen uitvoeren zoals we deden in componentWillReceiveProps.