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中的普通去抖功能。

Answer 2

我建议使用ref来访问显示进度的元素。如果它只是一个正在改变的进度条/值，那么为该情况调用setState在渲染方面有点浪费。上传开始显示进度时调用setState，然后再次调用setState以在完成后隐藏它。

Answer 3

您想对avatarUploadPercentage的价值做什么？如果您需要显示实际数字，那么按照其他答案中的建议您可以去抖动setState或直接修改dom。

但是，如果它显示正在填充的进度条，可以使用CSS完成，尽管仍然通过ref修改元素，但不会触发整个组件生命周期（浪费）

喜欢的东西 [refToProgressBarElement].style.width = `${avatarUploadPercentage}%`

React，如何快速更新状态

3 个答案: