JavaScript에서 사용자 정의 라이프사이클을 구현하는 방법(코드 예)

본 글의 내용은 JavaScript로 커스텀 라이프사이클을 구현하는 방법(코드 예시)입니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

React, Vue 및 Angular의 인기로 인해 "라이프 사이클"이라는 용어가 프런트엔드 전문가의 입에 자주 등장하게 되었으며 인터뷰에서 가장 일반적인 질문 중 하나는 다음과 같습니다.

라이프 사이클 소개 그리고 React, Vue의 사용?

멋지게 들리는 "라이프 사이클"은 사실 매개 변수를 전달하고 다른 시간에 호출하는 일반적인 메서드입니다. React의 라이프사이클에 따라 간단한 클래스를 직접 시뮬레이션할 수 있으며 이 클래스에 라이프사이클 후크가 있도록 할 수 있습니다.

우리는 다음과 같은 메소드와 라이프사이클을 갖는 State 클래스를 구현하기를 희망합니다.

메서드:

• setState

라이프 사이클:

• willStateUpdate(nextState): 상태가 변경됩니다

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

수십 줄의 코드로 자체 포함된 라이프 사이클을 구현했습니다. 상태급!

위 내용은 JavaScript에서 사용자 정의 라이프사이클을 구현하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!