Comment implémenter un cycle de vie personnalisé en JavaScript (exemple de code)

Ce que cet article vous apporte concerne la méthode d'implémentation d'un cycle de vie personnalisé en JavaScript (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La popularité de React, Vue et Angular a fait apparaître souvent le terme « cycle de vie » dans la bouche des professionnels du front-end, à tel point que l'une des questions les plus courantes lors des entretiens est :

Introduction Quels sont les cycles de vie et les méthodes d'utilisation de React et Vue ?

Le "cycle de vie" qui semble fantaisiste n'est en fait que quelques méthodes ordinaires, il suffit de passer des paramètres et de les appeler à des moments différents. . Nous pouvons simuler nous-mêmes une classe simple en fonction du cycle de vie de React, et laisser cette classe avoir quelques hooks de cycle de vie

Nous espérons implémenter une classe State, qui a les méthodes et le cycle de vie suivants :

Méthode :

• setState

Cycle de vie :

• willStateUpdate (nextState) : L'état est sur le point de changer

• shouldStateUpdate (nextState) : Si vous souhaitez que l'état change, l'état ne changera que si true est renvoyé

• didStateUpdate (prevState) : Après le changement d'état (si ShouldStateUpdate ne renvoie pas vrai, il ne sera pas appelé)

class User extends State {
  constructor(name) {
    super();
    this.state = { name }
  }

  willStateUpdate(nextState) {
    console.log('willStateUpdate', nextState);
  }

  shouldStateUpdate(nextState) {
    console.log('shouldStateUpdate', nextState);
    if (nextState.name === this.state.name) {
      return false;
    }

    return true;
  }

  didStateUpdate(prevState) {
    console.log('didStateUpdate', prevState);
  }
}

const user = new User('deepred');

user.setState({ name: 'hentai' });

Tout d'abord, vous devez connaître les connaissances de base du JavaScript orienté objet. Si vous ne le comprenez pas très bien, vous pouvez d'abord lire cet article

Implémentation de JavaScript orienté objet. setState

class State {
  constructor() {
    this.state = {};
  }

  setState(nextState) {
    const preState = this.state;
    this.state = {
      ...preState,
      ...nextState,
    };
  }
}

class User extends State {
  constructor(name) {
    super();
    this.state = {
      name
    }
  }
}
const user = new User('tc');

user.setState({age: 10}); // {name: 'tc', age: 10}

dans React , la méthode setState ne modifiera que la valeur d'un attribut spécifique. Par conséquent, nous devons utiliser une variable preState dans la méthode pour conserver l'état précédent, puis fusionner. les anciens et les nouveaux états via l'opérateur d'expansion

Implémentation de willStateUpdate

willStateUpdate est appelé avant que l'état ne soit mis à jour. Il suffit donc d'appeler willStateUpdate avant de fusionner l'état

class State {
  constructor() {
    this.state = {};
  }

  setState(nextState) {
    // 更新前调用willStateUpdate
    this.willStateUpdate(nextState);
    const preState = this.state;
    this.state = {
      ...preState,
      ...nextState,
    };
  }

  willStateUpdate() {
    // 默认啥也不做
  }

}

class User extends State {
  constructor(name) {
    super();
    this.state = {
      name
    }
  }

  // 覆盖父级同名方法
  willStateUpdate(nextState) {
    console.log('willStateUpdate', nextState);
  }
}

const user = new User('tc');

user.setState({age: 10}); // {name: 'tc', age: 10}

implémentation de ShouldStateUpdate

Nous stipulons que l'état ne sera mis à jour que lorsque ShouldStateUpdate renvoie true. Par conséquent, avant de fusionner l'état, devraitStateUpdate

class State {
  constructor() {
    this.state = {};
  }

  setState(nextState) {
    this.willStateUpdate(nextState);
    const update = this.shouldStateUpdate(nextState);
    if (update) {
      const preState = this.state;
      this.state = {
        ...preState,
        ...nextState,
      };
    }
  }

  willStateUpdate() {
    // 默认啥也不做
  }

  shouldStateUpdate() {
    // 默认返回true，一直都是更新
    return true;
  }

}

class User extends State {
  constructor(name) {
    super();
    this.state = {
      name
    }
  }

  // 覆盖父级同名方法
  willStateUpdate(nextState) {
    console.log('willStateUpdate', nextState);
  }

  // 自定义何时更新
  shouldStateUpdate(nextState) {
    if (nextState.name === this.state.name) {
      return false;
    }

    return true;
  }
}


const user = new User('tc');

user.setState({ age: 10 }); // {name: 'tc', age: 10}

user.setState({ name: 'tc', age: 11 }); // 没有更新

implémentation de didStateUpdate

Si vous comprenez willStateUpdate, vous saurez également comment didStateUpdate est implémenté

class State {
  constructor() {
    this.state = {};
  }
  setState(nextState) {
    this.willStateUpdate(nextState);
    const update = this.shouldStateUpdate(nextState);
    if (update) {
      const preState = this.state;
      this.state = {
        ...preState,
        ...nextState,
      };
      this.didStateUpdate(preState);
    }
  }
  willStateUpdate() {
    // 默认啥也不做
  }
  didStateUpdate() {
    // 默认啥也不做
  }
  shouldStateUpdate() {
    // 默认返回true，一直都是更新
    return true;
  }

}

class User extends State {
  constructor(name) {
    super();
    this.state = {
      name
    }
  }
  // 覆盖父级同名方法
  willStateUpdate(nextState) {
    console.log('willStateUpdate', nextState);
  }
  // 覆盖父级同名方法
  didStateUpdate(preState) {
    console.log('didStateUpdate', preState);
  }

  shouldStateUpdate(nextState) {
    console.log('shouldStateUpdate', nextState);
    if (nextState.name === this.state.name) {
      return false;
    }

    return true;
  }
}
const user = new User('tc');
user.setState({ age: 10 }); 
user.setState({ name: 'tc', age: 11 });

Avec des dizaines de lignes de code, nous avons implémenté une classe State avec son propre cycle de vie !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!