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的完成

我们划定只要shouldStateUpdate返回true时，才更新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类了!