Reagieren, wie der Status schnell aktualisiert wird

Question

Wie wäre die empfohlene Methode zum Anzeigen eines sich schnell ändernden Werts in React, z. B. Upload-Fortschritt? In meinem axios Config habe ich

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

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

aber setState nicht genannt werden mag, die schnell natürlich und nicht die Reihenfolge garantiert. Soll ich stattdessen refs verwenden und den inneren html selbst ändern?

Answer 1

Wie wäre es zu begrenzen, wenn der Callback läuft? Sie können Ihren Callback in eine "Debounce" -Funktion einfügen, die die Häufigkeit begrenzt, mit der ein Callback ausgeführt wird. Underscore und Lodash bieten Debounce-Methoden an.

Einmal pro Sekunde:

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

plain Entprellfunktion von https://davidwalsh.name/javascript-debounce-function.

Answer 2

Ich würde empfehlen, einen Verweis zu verwenden, um auf das Element zuzugreifen, das den Fortschritt anzeigt. Das Aufrufen von setState für diesen Fall ist auf der Wiedergabeseite ein wenig verschwenderisch, wenn es nur ein Fortschrittsbalken/-wert ist, der sich ändert. Rufen Sie setState auf, wenn der Upload beginnt, den Fortschritt anzuzeigen, und setState erneut, um ihn nach Abschluss des Uploads auszublenden.

Answer 3

Was möchten Sie mit dem Wert avatarUploadPercentage machen? Wenn Sie die tatsächliche Zahl anzeigen müssen, können Sie, wie in der anderen Antwort vorgeschlagen, entweder setState entprellen oder das dom direkt ändern.

jedoch, wenn es einen Fortschrittsbalken angezeigt wird gefüllt werden, könnte es mit CSS gemacht werden, obwohl nach wie vor das Element über ref verändern, aber nicht eine ganze Komponente Lifecycle-Triggerung (verschwenderisch)

So etwas wie [refToProgressBarElement].style.width = `${avatarUploadPercentage}%`