React는 setInterval을 사용할 때 실제로 상태를 변경하지 않고 렌더링합니다.
트롤 블렌더
두 단계 모두에서 약간 다른 코드 블록을 사용하여 내 질문을 두 단계로 소개하겠습니다.
1 단계:
아래에는 2 초마다 자체적으로 렌더링되는 React 애플리케이션이 있으므로 브라우저가 콘솔에 렌더링 을 인쇄 하도록합니다. 사용자가 아무 키나 누르면 렌더링이 중지되고 콘솔 인쇄가 중지됩니다. 지금은 주석 처리 된 줄을 무시하십시오.
import { useState, useEffect, useRef } from 'react';
function App() {
const [number, setUpdate] = useState(0);
const [isPaused, setIsPaused] = useState(false);
const intervalRef = useRef(undefined);
useEffect(() => {
intervalRef.current = setInterval(() => setUpdate(prevNumber => ++prevNumber), 2000);
window.addEventListener('keydown', handleKeyDown);
}, []);
const handleKeyDown = () => {
clearInterval(intervalRef.current);
console.log('console log here');
// setIsPaused(isPaused);
};
console.log('render');
return null;
};
export default App;
다음은 애플리케이션의 스크린 샷입니다. 
위에서 일어난 일은 구성 요소를 5 번 렌더링 한 다음 키를 눌러 구성 요소의 렌더링을 중지 한 것입니다.
2 단계:
2 단계에서는 handleKeyDown에 설정된 상태를 주석 처리하지 않는 것을 제외하고는 정확히 동일한 애플리케이션이 있습니다.
const handleKeyDown = () => {
clearInterval(intervalRef.current);
console.log('console log here');
// This is no longer commented out. Why does it cause a new render?
setIsPaused(isPaused);
};
다음은 2 단계에서 코드를 변경 한 애플리케이션의 스크린 샷입니다. 
다시 한 번, 키를 누른 후 구성 요소가 5 번 렌더링되도록했습니다. 그러나 이제 setIsPaused (isPaused)에 의해 상태가 변경되지 않아야하는 경우에도 추가 렌더링이 있습니다 (이미 상태에있는 것과 동일한 값을 설정했기 때문에 상태가 실제로 변경되지 않기 때문입니다 ) .
2 단계에서 추가 렌더링이 발생하는 이유가 무엇인지 이해하는 데 어려움이 있습니다. 분명한 것일까 요?
setIsPaused (isPaused) 는 나를 더욱 당황하게 만드는 setInterval에 의해 실행되는 다른 상태 변경을 주석 처리하면 새로운 렌더링을 발생시키지 않습니다.
Hackape
이것은 알려진 기이 한 것 입니다. # 17474를 참조하십시오 . 새로운 동시 모드에서 도입 된 부작용입니다. 구성 요소 기능이 다시 실행되었지만 DOM은 변경되지 않은 상태로 유지됩니다.
나는 또한 사람들 이이 흥미로운 예를 게시하는 것을 발견했습니다 . 코드로 exp를 시도 할 수 있습니다. 구성 요소 함수에는 함수의 <div>{Math.random()}</div>추가 재실행에서 난수가 변경되었지만 상태가 변경되지 않으면 DOM에 반영되지 않는 것과 같은 내용이 포함 됩니다.
결론. 이 부작용은 대부분 무해하다고 생각할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
사용 중 상태가 여러 번 변경 될 때 다시 렌더링되는 것을 방지합니다.
- 2
useLocalStorage를 사용할 때 로컬 상태가 구성 요소를 다시 렌더링하지 않습니다.
- 3
React는 부모 상태가 변경 될 때 자식을 렌더링하지 않습니다.
- 4
Redux는 상태가 변경되지 않을 때 계속 다시 렌더링합니다.
- 5
상태 값을 다른 변수에 할당 한 다음 상태를 변경하면 React가 다시 렌더링을 트리거하지 않습니다.
- 6
React 구성 요소는 때때로 변경되지 않은 상태로 두 번 렌더링됩니다.
- 7
React를 사용하면 StrictMode에서 findDOMNode가 더 이상 사용되지 않으며 react-transition-group을 사용할 때 경고로 throw됩니다.
- 8
React-작동하지 않는 상태를 변경하여 구성 요소를 강제로 다시 렌더링합니다.
- 9
상태 만 변경하고 CSS를 사용하지 않을 때 React 앱 메뉴가 열리는 이유는 무엇입니까?
- 10
ChartKick 차트는 Wicked_PDF를 사용하여 PDF로 렌더링 할 때 표시되지 않습니다.
- 11
React-native : 앱을 다시로드 할 때 사용자는 로그인 상태를 유지해야합니다.
- 12
"Rick and Morty"REST API를 사용하여 내 화면에 이름을 렌더링하려고하는데 말 그대로 렌더링되는 것이없고 상태가 업데이트되지 않습니다.
- 13
상태가 변경 될 때 React가 다시 렌더링되지 않습니다.
- 14
렌더링에 영향을주지 않는 변수에 대해 상태를 사용해야합니까?
- 15
Vue.js는 변수가 onUploadProgress로 변경 될 때 DOM을 다시 렌더링하지 않습니다.
- 16
jQuery는 setInterval을 사용하여 페이지를 새로 고치지 않고 자동으로 날짜를 변경합니다.
- 17
React는 어떻게 자식 구성 요소를 재사용하고 부모 구성 요소를 다시 렌더링 할 때 자식 구성 요소의 상태를 유지합니까?
- 18
Antd 3.26 양식 유효성 검사 메시지는 상태 / 소품이 변경 될 때 새 값으로 다시 렌더링되지 않습니다.
- 19
조각 셰이더에서 사용하지 않는 변수는 렌더링 결과를 변경합니다.
- 20
React Router V5는 링크를 클릭 할 때 경로를 렌더링하지 않지만 뒤로 및 앞으로 버튼이 작동합니까?
- 21
클립 보드로 복사 기능을 사용할 때 UUID가 상태를 변경하는 것을 방지하는 방법은 무엇입니까?
- 22
상태가 변경 될 때 상태에 의존하지 않는 컴포넌트를 리 렌더합니까?
- 23
React 구성 요소는 두 번 렌더링되고 상태 후크를 사용하지 않는 함수 구성 요소는 한 번만 렌더링됩니다.
- 24
React Router Link는 컴포넌트를 렌더링하지 않지만 URL을 변경합니다.
- 25
IntellIJ를 사용하여 앱을 실행하려고 할 때 APK 경로가 지정되지 않았습니다.
- 26
형제가 상태 변경을 트리거 할 때 하위 구성 요소가 다시 렌더링되지 않음
- 27
두 번 렌더링하지 않고 소품이 변경 될 때 상태를 업데이트하는 방법
- 28
setState ()를 사용해도 상태 변경 후 React 구성 요소가 다시 렌더링되지 않습니다.
- 29
Rails 앱이 주제 이름을 렌더링하지 않고 대신 주제 / 9를 렌더링합니다.
몇 마디 만하겠습니다