开发者社区> 问答> 正文

#React 为什么我们需要将一个函数传递给setState()?

#React 为什么我们需要将一个函数传递给setState()?

展开
收起
因为相信,所以看见。 2020-05-07 18:12:03 1021 0
1 条回答
写回答
取消 提交回答
  • 阿里,我所有的向往

    其背后的原因setState()是异步操作。由于性能原因,React批处理状态更改,因此状态在setState()调用后可能不会立即更改。这意味着您在调用时不应依赖当前状态,setState() 因为您不确定该状态是什么。解决方案是将一个函数传递给setState(),以先前的状态作为参数。通过这样做,您可以避免由于的异步特性而导致用户在访问时获得旧状态值的问题setState()。

    假设初始计数值为零。经过三次连续的递增运算后,该值将仅递增一。

    // assuming this.state.count === 0
    this.setState({ count: this.state.count + 1 })
    this.setState({ count: this.state.count + 1 })
    this.setState({ count: this.state.count + 1 })
    // this.state.count === 1, not 3
    

    如果我们将函数传递给setState(),则计数将正确递增。

    this.setState((prevState, props) => ({
      count: prevState.count + props.increment
    }))
    // this.state.count ===
    

    3 as expected

    2020-05-07 18:13:04
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载