기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

제 영어 실력은 보통이고 지식도 풍부합니다. 저는 번역가가 아니기 때문에 무작위 번역이 많습니다. 제 말을 믿을 수 없다면 원문을 읽어보세요~~

원래 주소:https://facebook.github.io/react/docs/advanced-performance.html

---

###성능 최적화

개발자가 실제 프로젝트에서 React를 사용하기로 선택할 때마다 먼저 다음과 같은 질문을 할 것입니다. React를 사용하면 프로젝트가 더 빠르고 유연하며 유지 관리가 더 쉬워질 것입니다. 또한 상태 데이터가 변경될 때마다 인터페이스를 다시 렌더링하는 프로세스가 성능 병목 현상을 유발합니까? 내부적으로 React는 매번 UI 업데이트를 유발하는 비용이 많이 드는 DOM 작업을 최소화하기 위해 몇 가지 미묘한 기술을 사용하여 성능을 보장합니다.

####DOM에 직접적인 영향을 주지 마세요
React는 브라우저의 기본 DOM 트리를 매핑하는 데 사용되는 가상 DOM 레이어를 구현합니다. 이 가상 DOM 계층을 통해 React는 브라우저 DOM을 직접 조작하는 속도가 JavaScript 객체를 조작하는 것보다 훨씬 느리기 때문에 DOM을 직접 조작하는 것을 피할 수 있습니다. 구성 요소의 속성이나 상태가 변경될 때마다 React는 메모리에 새로운 가상 DOM을 구성하고 원래의 이전 돔과 비교하여 브라우저의 DOM 트리를 업데이트해야 하는지 결정하여 최대한 돔 렌더링을 최적화합니다. 가능합니다.

게다가 React는 컴포넌트 생명주기 기능을 제공합니다.shouldComponentUpdate, 구성 요소는 다시 렌더링하기로 결정하기 전에(가상 DOM 비교가 완료되고 최종 DOM이 생성된 후) 이 함수를 호출합니다. 이 함수는 개발자에게 다시 렌더링할 수 있는 권한을 부여하며 기본적으로 함수는 직접 반환됩니다.true, 이는 DOM 업데이트가 기본적으로 직접 시작됨을 나타냅니다.

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

React는 이 함수를 매우 자주 호출한다는 점에 주목할 필요가 있으므로 이 함수의 로직을 직접 구현하려는 경우 성능을 최대한 보장하시기 바랍니다.

예를 들어, 여러 게시물이 있는 채팅 애플리케이션이 있는데, 이때 게시물 중 하나만 변경되면 다음을 구현합니다.shouldComponentUpdate, 반응은 상황에 따라 변경되지 않은 게시물을 다시 렌더링하지 않습니다.

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

간단히 말해서, React는 비용이 많이 드는 DOM 작업을 가능한 한 피하고 개발자가 이 동작을 방해할 수 있도록 합니다.

####shouldComponentUpdate 실행 중
다음은 아래와 같이 하위 요소를 포함하는 구성 요소의 예입니다.

이전의 다음