react setState 机制

记住这几个字 不可变值

• 不能直接修改 this.state 的值，例如不能使用数组中的 props push splice 等方法
• 不能提前对 state 值进行修改，并且设置时不能直接修改 sate 的值

数据更新可能是异步的

• 直接使用可能是异步的

  this.setState({
    count: this.state.count + 1
  }, () => {
    // 在回调函数中，可以拿到最新的值
    // 这里相当于使用 Vue 的 $nextTick
    console.log(this.state.count)
  })

  // 这里使用时 异步的，直接获取拿不到最新的值
  console.log(this.state.count) 

• 在 setTimeout 中使用 setState 是同步的

  setTimeout(() => {
    this.setState({
      count: this.state.count
    })
  })

• 在自定义的 DOM 事件中，setState 是同步的

  document.body.addEventListener('click', () => {
    this.setState({
      count: this.state.count
    })
  })

• 可能会被合并

  state = {
  count: 0
}

handleClick = () => {
  this.setState({
    count: this.state.count + 1
  })
  this.setState({
    count: this.state.count + 1
  })
  this.setState({
    count: this.state.count + 1
  })
  // 传入对象，会被合并，执行一次结果
  console.log('count---->', this.state.count) // 0 再次执行会是 1，2，3
}

render() {
  return (
    <div onClick={this.handleClick}>测试</div>
  )
}

image.png

• 如果传入函数，就不会被合并

state = {
    count: 0
  }

  handleClick = () => {
    this.setState((prevState, props) => {
      return {
        count: prevState.count + 1
      }
    })
    this.setState((prevState, props) => {
      return {
        count: prevState.count + 1
      }
    })
    this.setState((prevState, props) => {
      return {
        count: prevState.count + 1
      }
    })
    console.log('count ------->', this.state.count) // 0，3，6
  }

  render() {
    return (
      <div onClick={this.handleClick}>测试</div>
    )
  }

image.png

setState 主流程

主流程.png

batchUpdate 机制

• setState 异步还是同步 ？
  • setState 无论是异步还是同步，要看是否命中 batchUpdate 机制

简单理解为: 当函数执行开始时 isBatchingUpdates 是 true 然后执行正常代码逻辑，函数执行结束时，isBatchingUpdates 是 false

  handleClick() {
    // 开始处于 isBatchingUpdates ， isBatchingUpdates = true
    this.setState({
      count: this.state.count + 1
    })
    // 结束 isBatchingUpdates = false
  }

但如果 setState 是异步时

  handleClick() {
    // 开始处于 isBatchingUpdates ， isBatchingUpdates = true
    setTimeout(() => {
      // 此时运行 setState ， isBatchingUpdates 的值已经是 false
      this.setState({
        count: this.state.count + 1
      })
    })

    // 结束 isBatchingUpdates = false
  }

• 哪些能命中 batchUpdate 机制？

  • 生命周期和它调用的函数
  • React 中注册的事件和它调用的函数
  • React 可以管理的入口 (React 提供的)

• 哪些不能命中 batchUpdate 机制 ？

  • setTimeout setInterval
  • 自定义的 DOM 事件
  • 总之是 React “管不到” 的入口 (不是 React 提供的)

transaction 事务机制

• 它是服务于 batchUpdate 的机制
  下面这种代码写法的机制就是 transaction 事务机制， 当然 react 底层实现并不是这么简单（只是为了快速理解）

  handleClick() {
    // 开始处于 isBatchingUpdates ， isBatchingUpdates = true
    // initialize

    // 自定义的方法 或者业务代码
    this.setState({
      count: this.state.count + 1
    })

    // close
    // 结束 isBatchingUpdates = false
  }

transaction.png

每天进步一点点 💪