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

在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吗？

最佳答案

如何限制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的纯反跳功能。

关于reactjs - react ，如何快速更新状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48037890/