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)

我们再来看看输出结果:

完结撒花~

发表评论

设为私密评论(仅博主可见)
1 Comment
  1. Eiko Chrome | 91.0.4449.0 Windows 10
    2021/4/6

    牛蛙