反応する、状態を高速に更新する方法

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その迅速もちろん呼ばれて好きではない、との順序を保証するものではありません。私はrefを代わりに使用し、inner htmlを自分自身に変更する必要がありますか？

Answer 1

onUploadProgressコールバックの実行を制限する方法はありますか？コールバックを実行する頻度を制限する "デバウンス"機能でコールバックをラップすることができます。 UnderscoreおよびLodashはデバウンス方法を提供します。

秒ごとに1回：

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を直接変更することができます。 [refToProgressBarElement].style.width = `${avatarUploadPercentage}%`