Série SPFx : Un regard plus approfondi sur des extraits de code importants

Lors du développement avec le SharePoint Framework (SPFx), comprendre les éléments de code essentiels qui gèrent le cycle de vie et l’état des composants est indispensable pour créer des WebParts évolutifs, efficaces et réactifs. SPFx s’appuie sur React (et d’autres bibliothèques) pour construire des composants, ce qui signifie que les développeurs doivent être familiers avec la façon dont les composants sont créés, mis à jour et supprimés de la page.

Chaque composant SPFx traverse un cycle de vie défini, et des méthodes clés telles que onInit, componentDidMount, setState et getDerivedStateFromProps vous permettent de contrôler comment et quand votre composant interagit avec le DOM, récupère des données ou répond aux entrées de l’utilisateur. Savoir quand et où placer certaines logiques dans ces méthodes peut avoir un impact significatif sur les performances et la maintenabilité.

OnInit

La fonction onInit() est une méthode de cycle de vie importante dans le SharePoint Framework (SPFx) et est exécutée lors de l’initialisation du WebPart. Cette fonctionnalité est utilisée pour obtenir le contexte de la page, telle que l’URL de la page actuelle, l’utilisateur actuel et le web actuel, et pour configurer ou initialiser les services nécessaires au WebPart. Voici un exemple de la façon dont vous pourriez l’utiliser dans un projet SPFx :

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

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

Dans cet exemple, la fonction onInit() est utilisée pour configurer la bibliothèque PnP-JS-Core avec le contexte du WebPart afin qu’elle puisse être utilisée pour récupérer des données du site SharePoint où le WebPart est affiché. Il est important de noter que la fonction onInit() retourne une Promise et que la fonction super.onInit() doit également être appelée, car cette fonction est également utilisée dans la classe de base du WebPart. L’utilisation de onInit() est optionnelle, mais est souvent utilisée si vous souhaitez effectuer un appel Ajax ou d’autres opérations réseau lors du chargement du WebPart.

componentDidMount

componentDidMount() est une méthode de cycle de vie dans React.js et est exécutée après qu’un composant a été rendu dans le DOM. C’est le meilleur endroit pour initier des appels Ajax ou d’autres opérations réseau car nous sommes sûrs que le composant existe et est affiché effectivement. Voici un exemple de la façon dont vous pourriez l’utiliser dans un projet SharePoint Framework (SPFx) :

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

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

Dans cet exemple, le titre est écrit dans l’état afin qu’il puisse être affiché ultérieurement dans le composant React lorsque le composant est rendu et affiché.

setState

setState() est une méthode dans React qui est utilisée pour modifier l’état d’un composant. Lorsque l’état d’un composant change, le composant est re-rendu et les modifications sont reflétées dans l’interface utilisateur.

Il est important de noter que setState() est asynchrone, ce qui signifie qu’il n’effectue pas un changement direct de l’état du composant. Au lieu de cela, le nouvel état est sauvegardé et une mise à jour est effectuée après que React a terminé le cycle actuel de mises à jour.

Voici un exemple de la façon dont vous pourriez utiliser setState() dans un projet SPFx :

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

Dans cet exemple, le composant a un état appelé « count » avec une valeur initiale de 0. Il y a un bouton avec un gestionnaire d’événement « click » qui appelle la fonction handleClick(). Cette fonction utilise setState() pour augmenter l’état de « count » de 1. Lorsque le bouton est cliqué, le composant est re-rendu avec la nouvelle valeur de « count » et l’utilisateur voit combien de fois le bouton a été cliqué.

getDerivedStateFromProps

Remplace la fonction componentWillReceiveProps. getDerivedStateFromProps est une méthode statique qui est invoquée après l’instanciation d’un composant et lorsqu’il reçoit de nouvelles props. Comme c’est une méthode statique, vous n’avez pas accès à this dans cette méthode, vous n’avez pas accès à d’autres méthodes de classe. Contrairement à componentWillReceiveProps, vous ne pouvez pas définir l’état dans cette méthode, donc la seule façon de mettre à jour l’état est de retourner un objet. Si vous ne souhaitez mettre à jour aucun état, renvoyez simplement null.

Voici comment componentWillReceiveProps fonctionnait :

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

Voici comment getDerivedStateFromProps fonctionne :

    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) {
        //Perform some operation here
        this.setState({ someState: someValue });
        this.classMethod();
      }
    }

Elle reçoit deux paramètres : nextProps et prevState. Comme mentionné précédemment, vous ne pourrez pas accéder à this dans cette méthode, vous devrez donc sauvegarder les props dans l’état pour comparer les nextProps avec les props précédentes. Dans le code ci-dessus, nextProps et prevState sont comparés, si les deux sont différents, un objet est retourné pour mettre à jour l’état. null est retourné pour indiquer qu’une mise à jour de l’état n’est pas requise. Si l’état change alors, componentDidUpdate est appelé où nous pouvons effectuer les opérations souhaitées comme nous le faisions dans componentWillReceiveProps.