JavaScript 简单实现生命周期

生命周期是什么？生命周期...(以下省略3000字)

由于 Vue、React 的流行，生命周期这个词那自然是不可避免的会看到，看似高级其实不过是在不同时间点直接调用罢了

让我们写一个类：
有三个生命周期钩子和一个设定 State 的 function

class State {
  constructor() {
    this.state = {}  // 设定初始值
  }

  setState(newState) {  // 设置 state 的方法
    this.willStateUpdate(newState)
    const shouldUpdate = this.shouldStateUpdate(newState)
    if(shouldUpdate) {  // 如果是处TRUE 才执行
      const oldState = this.state  // 保存原来的 State
      this.state = { ...oldState, ...newState }  // 设定新 State
      this.didStateUpdate(oldState)
    }
  }

  willStateUpdate(newState) {  // 更新之前
    console.log('将要更新辣！！准备更新的 State：', newState)
  }

  shouldStateUpdate(newState) {  // 是否更新
    console.log('可以更新呀？！准备更新的 State：', newState)
    return true
  }

  didStateUpdate(oldState) {  // 更新完成
    console.log('更新完成辣！！这是以前的 State：', oldState)
  }
}

让我们使用看看：

class Test extends State {
  constructor() {
    super()
    this.state = {
      name: 'BianDan',
      age: 16
    }
  }
}

const res = new Test()
res.setState({
  age: 22
})
console.log(res.state)

结果输出：

如果 willStateUpdate 不允许呢？

class Test extends State {
  constructor() {
    super()
    this.state = {
      name: 'BianDan',
      age: 16
    }
  }

  shouldStateUpdate() {
    console.log('楼上的！我不允许更新！！')
    return false
  }
}

const res = new Test()
res.setState({
  age: 22
})
console.log(res.state)

我们再来看看输出结果：