Heim > Web-Frontend > js-Tutorial > Hauptteil

So implementieren Sie einen benutzerdefinierten Lebenszyklus in JavaScript (Codebeispiel)

不言
Freigeben: 2019-01-15 10:01:29
nach vorne
2726 Leute haben es durchsucht

In diesem Artikel geht es um die Methode zur Implementierung eines benutzerdefinierten Lebenszyklus in JavaScript (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

Die Beliebtheit von React, Vue und Angular hat dazu geführt, dass der Begriff „Lebenszyklus“ oft im Mund von Front-End-Profis auftaucht, so sehr, dass dies auch eine der häufigsten Fragen in Interviews ist :

Einführung Was sind die Lebenszyklen und Nutzungsmethoden von React und Vue?

Der „Lebenszyklus“, der sich schick anhört, besteht eigentlich nur aus einigen gewöhnlichen Methoden, bei denen nur Parameter übergeben und auf unterschiedliche Weise aufgerufen werden Perioden. Wir können selbst eine einfache Klasse entsprechend dem Lebenszyklus von React simulieren und dieser Klasse einige Lebenszyklus-Hooks geben

Wir hoffen, eine State-Klasse zu implementieren, die über die folgenden Methoden und Lebenszyklen verfügt:

Methode:

  • setState

Lebenszyklus:

  • willStateUpdate (nextState): Der Zustand ändert sich gerade

  • shouldStateUpdate (nextState): Wenn Sie möchten, dass sich der Status ändert, ändert sich der Status nur, wenn true zurückgegeben wird

  • didStateUpdate (prevState): Nachdem sich der Status geändert hat (wenn ShouldStateUpdate nicht true zurückgibt, wird es nicht aufgerufen)

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' });
Nach dem Login kopieren

Zuallererst müssen Sie es wissen: Wenn Sie die Grundlagen des objektorientierten JavaScript-Wissens nicht kennen, können Sie zunächst diesen Artikel lesen: JavaScripts objektorientierte

Implementierung von setState

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

  setState(nextState) {
    const preState = this.state;
    this.state = {
      ...preState,
      ...nextState,
    };
  }
}
Nach dem Login kopieren
class User extends State {
  constructor(name) {
    super();
    this.state = {
      name
    }
  }
}
const user = new User('tc');

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

In React ändert die setState-Methode nur bestimmte Werte des Attributs. Daher müssen wir in der Methode eine Variable preState verwenden, um den vorherigen Status beizubehalten, und dann den alten und neuen Status über den Spread-Operator

Implementierung von willStateUpdate

willStateUpdate wird aufgerufen, bevor der Status aktualisiert wird. Rufen Sie also einfach willStateUpdate auf, bevor Sie den Status zusammenführen.

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

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

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

}
Nach dem Login kopieren
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}
Nach dem Login kopieren

Implementierung von ShouldStateUpdate

Wir legen fest, dass der Status nur aktualisiert wird, wenn ShouldStateUpdate „true“ zurückgibt. Daher sollte vor dem Zusammenführen des Status StateUpdate

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

}
Nach dem Login kopieren
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 }); // 没有更新
Nach dem Login kopieren

didStateUpdate implementiert werden

Wenn Sie willStateUpdate verstehen, wissen Sie auch, wie didStateUpdate implementiert wird

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

}
Nach dem Login kopieren
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 });
Nach dem Login kopieren
Bestanden Mit nur ein paar Dutzend Codezeilen haben wir eine State-Klasse mit eigenem Lebenszyklus implementiert

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen benutzerdefinierten Lebenszyklus in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!