reactjs - React，如何快速更新状态

Question

在 React 中显示快速变化的值(例如上传进度)的推荐方法是什么？在我的 axios 配置中，我有

onUploadProgress: progressEvent => {
    let percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
    this.setState({ avatarUploadPercentage: percentCompleted })
}

<span>Upload progress: {this.state.avatarUploadProgress}</span>

但是setState当然不喜欢这么快被叫到，并且不能保证订单。我应该使用 refs 并自己更改内部 html 吗？

Answer 1

限制 onUploadProgress 回调运行的时间怎么样？您可以将回调包装在“去抖”函数中，该函数限制回调运行的频率。 Underscore和Lodash提供去抖方法。

每秒一次:

onUploadProgress: debounce(progressEvent => {
    let percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
    this.setState({ avatarUploadPercentage: percentCompleted })
}, 1000)

请参阅 https://davidwalsh.name/javascript-debounce-function 中的简单去抖功能.