प्रतिक्रिया, राज्य को तेज़ कैसे अपडेट करें

Question

प्रतिक्रिया में तेजी से बदलते मूल्य को प्रदर्शित करने के लिए अनुशंसित तरीका क्या होगा, उदाहरण अपलोड प्रगति? मेरी Axios config में मैं

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

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

है, लेकिन setState बुलाया जा रहा है कि जल्दी से जाहिर है, और व्यवस्था की गारंटी नहीं है पसंद नहीं है। क्या मुझे इसके बजाय रेफरी का उपयोग करना चाहिए और आंतरिक HTML को स्वयं बदलना चाहिए?

Answer 1

onUploadProgress कॉलबैक चलाने पर सीमित होने के बारे में कैसे? आप अपने कॉलबैक को "debounce" फ़ंक्शन में लपेट सकते हैं जो आवृत्ति को सीमित करता है जिसे कॉलबैक चलाया जाएगा। 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 से सादे debounce समारोह देखें।

Answer 2

मैं प्रगति प्रदर्शित करने वाले तत्व तक पहुंचने के लिए एक रेफरी का उपयोग करने की अनुशंसा करता हूं। उस मामले के लिए कॉलिंग सेटस्टेट प्रतिपादन पक्ष पर थोड़ा अपर्याप्त है यदि यह केवल एक प्रगति पट्टी/मान है जो बदल रहा है। जब अपलोड प्रगति प्रदर्शित करना शुरू होता है तो सेट सेट करें, फिर पूर्ण होने के बाद इसे छिपाने के लिए फिर से सेट करें।

Answer 3

avatarUploadPercentage के मूल्य के साथ आप क्या करना चाहते हैं? यदि आपको वास्तविक संख्या प्रदर्शित करने की आवश्यकता है, तो जैसा कि दूसरे उत्तर में सुझाया गया है, आप या तो सेटस्टेट को डिबॉउशन कर सकते हैं या सीधे डोम को संशोधित कर सकते हैं।

हालांकि

अगर यह भरा जा रहा है, यह सीएसएस का उपयोग किया जा सकता है, एक प्रगति बार प्रदर्शित कर रहा है, हालांकि अभी भी रेफरी के माध्यम से तत्व को संशोधित करने के लिए, लेकिन एक पूरी घटक जीवन चक्र को ट्रिगर नहीं (बेकार)

कुछ तरह [refToProgressBarElement].style.width = `${avatarUploadPercentage}%`