분류 Reactjs

React 가상 DOM 사후

컨텐츠 정보

  • 조회 277 (작성일 )

본문

UI를 빌드 하기 위해 React를 사용하는 것과 실제로 그것이 실제로 작동하는 방식을 알아야 할 필요가 있습니다.


처음 React <App /> 시작 


React는 App 클래스를 루트 애플리케이션 컨테이너에 자동으로 마운트 합니다


1*NBBZYfjeVBfHa1gPnMZJzA.gif 

<App />를 처음으로 마운트.


이제 앱이 DOM에 마운트되었으므로 더 자세히 살펴 보겠습니다.


상 DOM 및 확산 ( "조정") 알고리즘 


React 앱을 빌드하기 위해 <Really />는 내부 종과 휘파람을 알 필요가 없습니다. 하지만… 어떤 이유로 든 이 튜토리얼을 만들어서 React에서 어떤 일이 일어나고 있는지 시각적으로 더 잘 파악하기로 했습니다. 


DIFFing 알고리즘은 두 개의 가상 DOM 간의 차이점을 찾습니다. 기다림. 두 개의 가상 DOM? 하나만 있다고 생각했습니다. React는 이전 가상 DOM과 새로 생성 된 DOM을 비교합니다. 변경 사항이 감지 된 경우에만 브라우저의 DOM이 업데이트 됩니다.


1*BAleNGsko42ArMZKbsjPRA.gif 

React의 Diffing Algorithm의 추상 애니메이션. 두 개의 가상 DOM 트리가 다른 것으로 밝혀지면 가장 최근의 트리 (가장 최신 트리)가 브라우저의 실제 DOM과 조정됩니다.


여기서 무슨 일이 일어나고 있는지에 대한 간단한 설명 : 


API.tweet ()은 click 이벤트에서 메시지를 포함하는 POST 데이터와 함께 호출됩니다.


페이로드는 (event) => {…} 콜백으로 전송 및 수신됩니다.


리턴 된 페이로드 데이터로 인해 props이 변경되면 트리가 DIFF됩니다.


두 가상 DOM 트리가 다를 경우 가장 최근의 트리가 브라우저로 전송됩니다.


그런 다음이 새로운 가상 DOM은 오래된 가상 DOM이 되고 미래의 가상 DOM을 기다립니다.


React Components 


React 컴포넌트는 JavaScript 객체에 지나지 않습니다. React는 바이너리 트리 형태로 전체 UI 구조를 나타내는 자체 가상 DOM을 만듭니다. 이 가상 DOM 트리를 메모리에 유지하여 실제 브라우저에서 최종적으로 렌더링 되기 전에 다양한 구성 요소를 여러 번 추가, 업데이트 및 삭제하고 DOM을 UI에서 물리적으로 업데이트합니다.


UI를 렌더링 하는 것 외에는 render ()를 사용하지 마십시오. 상태 또는 소품을 변경해야 하는 경우 React의 내장 수명주기 방법을 사용해야 합니다.


render()는 항상 순수한 함수로 유지되어야 합니다 


render() 함수는 가상 DOM 컴포넌트를 업데이트합니다. 이 새로운 가상 DOM 트리가 이전에 렌더링 된 가상 DOM 트리와 다른 경우 React는 실제 브라우저의 DOM도 업데이트합니다. 특히 render () 함수가 아닌 브라우저의 DOM을 어디서나 직접 업데이트하는 것은 당신의 일이 아닙니다.


1*ixymleyewAuYn8WsPOV7Ng.png 

어떤 식으로든 DOM을 직접 업데이트하는 함수로 render() 메소드를 오염시키지 마십시오.


setState로도 상태를 변경해서는 안됩니다. HTTP 요청, jQuery, Ajax 또는 render() 내에서 호출을 가져와야 순수하게 유지해야 합니다. 모든 가상 DOM 업데이트가 이미 실행되었다고 가정하면 렌더링 기능은 항상 UI를 업데이트 하기 위한 최종 단계로만 실행됩니다.


라이프 사이클 이벤트 


컴포넌트가 DOM에 처음으로 마운트되면 React는 componentWillMount 이벤트를 작성합니다. 가상 컴포넌트가 실제 브라우저의 DOM에 실제로 마운트 (처음으로 렌더링) 된 후 componentDidMount라는 또 다른 라이프 사이클 이벤트가 실행됩니다.


전체 응용 프로그램 수명 주기 동안 이러한 수명 주기 이벤트 방법 내에서 대부분의 구성 요소 논리를 작성해야 합니다.


애니메이션 후크 다음? 


저는 이 튜토리얼을 가상 DOM과 수명주기 사후 평가라고 생각합니다.


많은 개발자들이 갈고리로 전환했습니다. React 문서에 따르면 구성 요소 수명 주기 이벤트는 안전하지 않은 것으로 간주되어 향후 폐기 될 수 있습니다. 아직도 이 애니메이션을 만드는 것은 재미있었습니다. React를 처음 접하는 사람들이나 개발 역사에 관심이 있는 사람에게는 적어도 한두 가지 교훈이 있을 것입니다.


어떤 사람들은 갈고리가 대체물이 아니라 대안이라고 생각합니다. 나는 그것에 대해 어떤 주장을 하려고 하지 않습니다.