반응, 상태를 빠르게 업데이트하는 방법

Question

급격히 변화하는 값 (예 : 업로드 진행)을 표시하는 권장 방법은 무엇입니까? 내 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 콜백이 실행되는 시점을 제한하는 것은 어떻습니까? 콜백이 실행될 빈도를 제한하는 "디 바운스 (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에서 일반 디 바운스 기능을 참조하십시오.

Answer 2

ref를 사용하여 진행 상황을 표시하는 요소에 액세스하는 것이 좋습니다. 이 경우에 setState를 호출하는 것은 변경되는 진행률 막대/값인 경우 렌더링 측에서 약간 낭비입니다. 업로드가 진행 상황을 표시하기 시작할 때 setState를 호출 한 다음 setState를 다시 호출하여 완료 후이를 숨 깁니다.

Answer 3

avatarUploadPercentage의 값으로 무엇을하고 싶습니까? 실제 숫자를 표시해야하는 경우 다른 대답에서 제안한 것처럼 setState를 디버깅하거나 dom을 직접 수정할 수 있습니다. 그러나

이,이, CSS를 사용하여 수행 할 수 충만 진행 표시 줄을 표시 않다면 여전히 심판을 통해 요소를 수정하지만,

뭔가 [refToProgressBarElement].style.width = `${avatarUploadPercentage}%`