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로 이전state를 보존한 다음에 연산자를 전개하여 신구state를 합병해야 한다.
willStateUpdate의 실현willStateUpdate는 state 상태 업데이트 전에 호출된 것이다.따라서 합병state 전에 호출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의 실현
우리는 shouldStateUpdatetrue로 돌아갈 때만 업데이트할 것을 규정한다state.따라서 합병state 전에 호출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 });

수십 줄의 코드를 통해 우리는 이미 자체 생명주기State류를 실현했다!