JavaScript でカスタム ライフサイクルを実装する方法 (コード例)

この記事の内容は JavaScript でのカスタム ライフ サイクルの実装方法 (コード例) です。必要な方は参考にしていただければ幸いです。

React、Vue、Angular の人気により、「ライフサイクル」という用語がフロントエンド担当者の口に頻繁に登場するようになり、面接で最も一般的な質問の 1 つも次のとおりです。

##はじめに React と Vue のライフ サイクルと使用方法とは何ですか?

「ライフ サイクル」というと派手に聞こえますが、実際にはパラメーターを渡して、異なるタイミングで呼び出すだけのごく普通のメソッドです。 React のライフ サイクルに従って簡単なクラスを自分たちでシミュレートし、このクラスにいくつかのライフ サイクル フックを持たせることができます。

次のメソッドとライフ サイクルを持つ State クラスを実装したいと考えています。

Method:

• #setState

##Lifecycle:

##willStateUpdate (nextState): 状態は次のとおりですchange

• #ShouldStateUpdate (nextState): 状態を変更したい場合、true が返された場合にのみ状態が変更されます

• #didStateUpdate (prevState) : 状態が変化した後 ( shouldStateUpdate が true を返さない場合、呼び出されません)

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

まず第一に知っておく必要があります JavaScript のオブジェクト指向の知識の基本がわからない場合は、まずこの記事を読むことができます JavaScript のオブジェクト指向

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}

React では、 setState メソッドは特定の属性の値のみを変更します。そのため、メソッド内で変数 preState を使用して前の状態を保持し、スプレッド演算子を介して古い状態と新しい状態をマージする必要があります

#willStateUpdate の実装

willStateUpdate は、状態が更新される前に呼び出されます。したがって、状態をマージする前に willStateUpdate を呼び出すだけです。

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}

shouldStateUpdate の実装

shouldStateUpdate が true を返した場合にのみ状態が更新されると規定しています。したがって、状態をマージする前に、 shouldStateUpdate

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

didStateUpdate の実装

willStateUpdate を理解していれば、didStateUpdate がどのように実装されているかもわかります

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

Passedわずか数十行のコードで、独自のライフサイクルを持つ State クラスを実装しました!

以上がJavaScript でカスタム ライフサイクルを実装する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。