Tepki, durumun nasıl güncelleştirileceği

Question

Hızla değişen bir değerin React olarak görüntülenmesi için önerilen yol ne olurdu? Benim AXIOS konfigürasyonunda ben

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

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

var ama çabuk tabii ve düzeni garanti etmeyeceğini çağrıldığını setState sevmez. Ref yerine kullanmalı mıyım ve iç htmlimi kendim mi değiştirmeliyim?

Answer 1

onUploadProgress geri çağrıldığında ne zaman kısıtlama yapılır? Geriçağırımınızı, geri çağırma işleminin çalışacağı frekansı sınırlandıran bir "geri dönme" işlevine sarabilirsiniz. Underscore ve Lodash, geri dönüş yöntemleri sunar.

saniyede bir kez:

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

https://davidwalsh.name/javascript-debounce-function düz olarak filtreleme fonksiyonu.

Answer 2

İlerleme durumunu görüntüleyen öğeye erişmek için ref kullanmanız önerilir. Bu durum için setState çağrısı, yalnızca değişmekte olan bir ilerleme çubuğu/değeriyse, render tarafında biraz israflıdır. Yükleme ilerlemeyi görüntülemeye başladığında setState'i çağırın, ardından tamamlandıktan sonra gizlemek için tekrar SetState ayarlayın.

Answer 3

avatarUploadPercentage değeri ile ne yapmak istersiniz? Gerçek sayıyı görüntülemeniz gerekiyorsa, diğer cevapta önerildiği gibi setState'i geri yükleyebilir veya domu doğrudan değiştirebilirsiniz. Ancak

o, o, CSS kullanarak yapılabilir dolduruluyor bir ilerleme çubuğunun gösterilmesi eğer hala ref yoluyla eleman değiştirerek, ama

şey [refToProgressBarElement].style.width = `${avatarUploadPercentage}%`