React JS-Render 호출 시기

React는 이미 세계에서 가장 유행하는 자바스크립트 프레임워크 중의 하나가 되었다.페이스북은 개발진이 커지면서 더 빠르고 경량급으로 만들기 위해 노력해 왔다.
모든 개발자가 알아야 할 가장 중요한 특성 중 하나는 렌더링 방법이다.너는 그것이 어떻게 호출되었는지, 그리고 언제 호출되었는지 알아야 한다.
경험에 따르면, 우리는 구성 요소가 다시 나타날 수 있는 모든 사건을 기억해야 한다.
React JS에서 렌더링 방법은 다음과 같습니다.
  • 부품 상태가 변경될 경우
  • 구성 요소의 아이템 변경 시
  • forceUpdate 함수를 호출할 때


  • 촉발 요인은 무엇입니까?
    React는 중요한 이벤트가 발생할 때마다 렌더링을 스케줄링하고 호출합니다.React는 필요할 때만 구성 요소를 업데이트할 수 있는 지능적인 기능입니다.최적의 성능을 보장합니다.

    구성 요소 설치
    첫 번째 중요한 이벤트는 구성 요소를 DOM에 설치하는 것입니다.이것은 구성 요소의 초기 렌더링으로 여겨지고 한 번만 발생합니다.다른 모든 추가 렌더링은 다른 이벤트에 의해 트리거됩니다.

    상태 또는 아이템의 변화
    구성 요소의 state 또는 props은 일반적으로 구성 요소에 표시되는 내용을 제어하는 데 사용됩니다.어셈블리 중 하나를 변경할 때마다 어셈블리를 렌더링하는 것은 매우 의미가 있습니다.
    그러나 일부 경우 도구나 상태는 렌더링 방법에 영향을 주지 않을 수 있습니다.어셈블리를 다시 렌더링할 필요는 없습니다.그럼 무슨 일이 일어날까요?
    기본적으로 React는 render 메서드를 트리거합니다.이것은 가장 좋은 것은 아니지만 state인지 props인지 렌더링 방법을 제어하는 것인지 알 수 없다.좋은 소식은 리액트가 개발자를 위해 이런 행위를 통제하는 방법을 실현했다는 것이다.우리는 본문의 마지막 절에서 이런 방법을 소개할 것이다.

    강제 렌더링
    마지막으로 React render를 트리거하는 것은 forceUpdate 함수입니다.그러나 이런 방법은 사용하지 말고 propsstate만 사용하도록 강력히 권장한다.

    React를 다시 렌더링하면 어떻게 됩니까?
    react render 메서드는 react 구성 요소를 렌더링하는 데 사용됩니다.이러한 기술은 데이터 변경이나 사용자가 단추를 눌렀을 때 웹 페이지를 업데이트해야 하는 곳에 사용된다.
    이 기술의 배후에는 모든 React 구성 요소의 업데이트가 렌더링 과정에서 이루어진다는 것이 있다.어셈블리를 다시 렌더링하면 모든 논리와 계산이 평가됩니다.모든 작업이 완료되면 구성 요소가 출력됩니다.
    이것은 우리가 업데이트해야 할 내용만 업데이트함으로써 불필요한 계산과 DOM 작업을 피할 수 있다는 것을 의미한다. 어떤 내용을 변경할 때마다 모든 구성 요소를 처리하는 것이 아니라.

    React가 다시 나타나는지 어떻게 알아요?
    다음 문제의 답안은 매우 간단하다.React 구성 요소는 구성 요소의 데이터가 변경될 때만 표시된다는 데 동의합니다.우리는 또한 그것이 어떠한 구성 요소 데이터일 수 없다는 것을 알았다.렌더링 블록에 사용되는 데이터여야 합니다.
    그러나 어떤 경우 이런 정보는 부족하다.우리는 무슨 일이 일어났는지 보기 위해 우리의 구성 요소를 디버깅해야 한다.만약 우리가 이런 행위를 디버깅하고 추적할 필요가 있다면, 우리는 몇 가지 옵션을 사용할 수 있다.

    콘솔 로깅
    가장 간단한 솔루션은 렌더링 블록에서 console.log을 사용하고 브라우저 창에서 콘솔 출력을 보는 것입니다.
    이 해결 방안은 가장 빠르지만, 렌더링을 쉽게 추적할 수 없습니다.모든 구성 요소를 따로 설정해야 합니다.

    React 개발자 도구 사용
    다른 솔루션은 React Developer Tools을 사용하는 것입니다.이 도구는 React 팀에서 작성합니다.그것의 목적은 구성 요소를 신속하게 디버깅하고 검사하는 것이다.그것은 많은 재미있는 기능을 가지고 있는데, 그 중 하나는 렌더링을 추적하는 능력이다.
    만약 네가 이 공구에 익숙하지 않다면 걱정할 이유가 없다.우리는 네가 진도를 빨리 따라갈 수 있도록 빠른 강좌를 썼다.너는 전문 here을 읽을 수 있다.

    너는 왜 과장하느냐

    why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders


    렌더링 추적을 위해 특별히 제작된 솔루션을 사용하는 경우Why Did You Render이라는 패키지를 사용할 수 있습니다.간단한 설정이 있고 렌더링 추적을 시작합니다.
    가장 중요한 것은 이 패키지가 당신이 피할 수 있는 렌더링을 알려 줄 것입니다.따라서 응용 프로그램에서 더 좋은 성능을 얻으려고 시도할 경우이 소포는 아마 너에게 딱 맞을 것이다.

    어셈블리 렌더링 시간 제어하기
    앞서 지적한 바와 같이 render 또는 props이 변경될 때마다 React는 state 방법을 촉발할 것이다.그러나 이 외에도 우리는 shouldComponentUpdate 함수를 실현하여 이런 행위를 맞춤형으로 만들 수 있다.shouldComponentUpdate을 사용하여 React 구성 요소의 출력이 state 또는 props의 전류 변화에 영향을 받지 않는지 알려줍니다.기본 비헤이비어는 상태가 변경될 때마다 다시 렌더링되므로 대부분의 경우 기본 비헤이비어에 의존해야 합니다.
    아래의 예에서 우리는 shouldComponentUpdate 함수를 실현하였다.이 경우 value이 변경된 경우에만 어셈블리가 다시 렌더링됩니다.언제든지 unusedString을 변경할 수 있지만 어셈블리의 렌더링은 트리거되지 않습니다.
    import React from "react";
    
    class Counter extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: 0,
          unusedString: "Hey there!",
        };
      }
    
      shouldComponentUpdate(nextProps, nextState) {
        // If the method returns true, component is rerendered
        // If it return true, it is not rerenderd
        return this.state.value != nextState.value;
      }
    
      render() {
        return <div>{this.state.value}</div>;
      }
    }
    
    export default Counter;
    

    결어
    React 렌더링은 항상 무시되는 개념입니다.우리는 그것이 신기하게 일할 뿐 통제할 방법이 없다고 생각하는 경향이 있다.
    어쨌든 우리는 과장을 걱정하지 말라고 격려를 받았다.또한 구성 요소의 stateprops만 추적합니다.
    그러나 만약 우리가 정말로 우리의 구성 요소가 어떻게 작동하고, 그것들이 어떻게 더 잘 작동하는지 보고 싶다면.우리는 그들의 과장 과정을 검사해야 한다.
    이 문서에서는 React JS의 렌더링 방법에 대한 모든 지식을 제공합니다.렌더링 방법이 언제 호출되는지 알고 있습니다.React JS에서 render 메서드를 트리거하는 모든 이벤트
    이 모든 정보를 기억하면 React 응용 프로그램의 렌더링을 최적화할 수 있습니다.
  • 좋은 웹페이지 즐겨찾기