저는 Js에 반응하는 것이 처음입니다. 클래스 구성 요소를 연습하고 있습니다. 렌더 메서드를 콘솔 로그 할 때 두 번 렌더링되는 것으로 나타났습니다.
import React, { Component } from 'react'
class Counter extends Component {
render() {
console.log('check');
return (
<div>
Count
</div>
)
}
}
export default Counter
이것은 React.StrictMode 때문에 발생합니다 .
ReactJS 공식 문서에 따르면,
개념적으로 React는 두 단계로 작동합니다.
렌더링 단계는 DOM을 예하게 할 필요가 변경을 결정합니다. 이 단계에서 React는 render를 호출 한 다음 그 결과를 이전 렌더링과 비교합니다.
는 단계 커밋 변경을 적용 할 때 반작용이다. (React DOM의 경우 React가 DOM 노드를 삽입, 업데이트 및 제거 할 때입니다.) React는이 단계에서 componentDidMount 및 componentDidUpdate와 같은 수명 주기도 호출합니다.
커밋 단계는 일반적으로 매우 빠르지 만 렌더링 속도가 느릴 수 있습니다. 이러한 이유로 예정된 동시 모드 (아직 기본적으로 활성화되지 않음)는 렌더링 작업을 조각으로 나누고 브라우저 차단을 방지하기 위해 작업을 일시 중지하고 다시 시작합니다. 이는 React가 커밋하기 전에 렌더링 단계 라이프 사이클을 두 번 이상 호출하거나 전혀 커밋하지 않고 호출 할 수 있음을 의미합니다 (오류 또는 더 높은 우선 순위 중단으로 인해).
더 알아보기 여기에 공식 문서에서.
명확한 이해 를 위해이 구성 요소 수명주기 그래프를 참조하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다