Phản hồi, cách cập nhật trạng thái nhanh chóng

Question

Cách được đề xuất để hiển thị giá trị thay đổi nhanh trong React, ví dụ: tiến trình tải lên là gì? Trong cấu hình Axios của tôi, tôi có

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

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

nhưng setState không thích bị gọi là một cách nhanh chóng tất nhiên, và sẽ không đảm bảo trật tự. Tôi có nên sử dụng thay vào đó thay vào đó và tự thay đổi html bên trong không?

Answer 1

Làm thế nào để hạn chế khi cuộc gọi lại onUploadProgress chạy? Bạn có thể bọc gọi lại của bạn trong một "debounce" chức năng giới hạn tần số một cuộc gọi lại sẽ chạy. Underscore và Lodash phương thức gỡ lỗi cung cấp.

Khi mỗi giây:

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

Xem chức năng debounce đồng bằng từ https://davidwalsh.name/javascript-debounce-function.

Answer 2

Tôi khuyên bạn nên sử dụng ref để truy cập phần tử đang hiển thị tiến trình. Gọi setState cho trường hợp đó là một chút lãng phí trên mặt hiển thị nếu nó chỉ là một thanh tiến trình/giá trị đang thay đổi. Gọi setState khi quá trình tải lên bắt đầu hiển thị tiến độ, sau đó setState lần nữa để ẩn nó sau khi nó hoàn tất.

Answer 3

Bạn muốn làm gì với giá trị avatarUploadPercentage? Nếu bạn cần hiển thị số thực, sau đó như được đề xuất trong câu trả lời khác, bạn có thể hoặc là debounc setState hoặc sửa đổi dom trực tiếp.

Tuy nhiên nếu nó hiển thị một thanh tiến trình được lấp đầy, nó có thể được thực hiện bằng CSS, mặc dù vẫn còn thay đổi các yếu tố qua ref, nhưng không kích hoạt một chu kỳ thành phần toàn bộ (lãng phí)

Something như [refToProgressBarElement].style.width = `${avatarUploadPercentage}%`