반응 수명주기의 원

반응 구성 요소는 응용 프로그램 라이프 사이클에서 다른 단계를 거치지 만, 무대 뒤에서 발생하는 일은 분명하지 않을 수 있습니다.

이 단계에는 다음이 포함됩니다.

• 산
• 고쳐 쓰다
• 제거하십시오
• 오류 처리

각 단계에는 구성 요소에서 특정 동작을 수행 할 수있는 해당 방법이 있습니다. 예를 들어, 네트워크에서 데이터를 가져 오면 componentDidMount() 메소드에서 API 호출을 처리하는 함수를 호출 할 수 있습니다 (마운트 단계에서 사용 가능).

다른 수명주기 접근 방식을 이해하는 것은 React Applications의 개발에 중요합니다. 다른 작업과 혼동하지 않고 필요할 때 작업을 정확하게 트리거 할 수 있기 때문입니다. 이 기사는 사용 가능한 방법과 사용하는 시나리오 유형을 포함하여 각 라이프 사이클을 다룹니다.

장착 단계

마운트를 구성 요소 수명주기의 초기 단계로 생각하십시오. 마운트가 발생하기 전에는 구성 요소가 존재하지 않았습니다. 마운트가 발생할 때까지 DOM을 통해 번쩍이고 문서의 일부로 연결했습니다.

구성 요소가 장착되면 constructor() , render() , componentDidMount() 및 static getDerivedStateFromProps() 의 많은 메소드를 활용할 수 있습니다. 각 방법에는 고유 한 목적이 있습니다. 순서대로 살펴 보겠습니다.

건설자()

구성 요소에서 상태를 직접 설정하여 방법을 함께 바인딩 할 때 constructor() 메소드가 필요합니다. 다음과 같이 보입니다.

 // 입력 구성 요소가 마운팅을 시작하면 ...
생성자 (소품) {
  // ... 소품을 설정 ...
  슈퍼 (소품);
  // ...이 경우 빈 사용자 이름입니다 ...
  this.state = {
    사용자 이름 : ''
  };
  // ... 그런 다음 입력을 처리하는 메소드를 바인딩합니다.
}

constructor 구성 요소를 생성 할 때 호출 된 첫 번째 방법이라는 것을 아는 것이 중요합니다. 구성 요소는 렌더링되지 않았지만 (곧 출시 될 것입니다) DOM은 이미 알고 있으며 렌더링하기 전에이를 연결할 수 있습니다. 따라서 구성 요소가 여전히 빌드 단계에 있기 때문에 setState() 호출하거나 부작용을 소개하는 곳이 아닙니다!

나는 이전에 Refs에 대한 튜토리얼을 작성했으며 내가 알아 차린 한 가지는 React.createRef() 사용할 때 constructor 에서 Ref를 설정할 수 있다는 것입니다. REFS는 소품없이 값을 변경하는 데 사용되거나 업데이트 된 값으로 구성 요소를 다시 렌더링해야하기 때문에 이는 합리적입니다.

 생성자 (소품) {
  슈퍼 (소품);
  this.state = {
    사용자 이름 : ''
  };
  this.inputtext = react.createref ();
}

세우다()

render() 메소드는 구성 요소의 마크가 프론트 엔드에 표시되는 곳입니다. 현재 사용자는이 시점에서이를보고 액세스 할 수 있습니다. React 구성 요소를 만든 경우 출력 태그가 필요하기 때문에 이미 알고 있지 않더라도 이미 익숙합니다.

 클래스 앱이 연장 rect.component {
  // 마운트 프로세스 중에 다음 컨텐츠를 렌더링하십시오!
  렌더 () {
    반품 (
      <div>
        <p>안녕하세요 세상!</p>
      </div>
    ))
  }
}

그러나 그것은 render() 의 전체 목적이 아닙니다! 구성 요소 어레이를 렌더링하는 데 사용될 수도 있습니다.

 클래스 앱이 연장 rect.component {
  렌더 () {
    반품 [
      <h2 id="자바-스크립트-도구">자바 스크립트 도구</h2> ,,,
      <frontend></frontend>,,,
      <backend></backend>
    ]]
  }
}

구성 요소 조각조차도 :

 클래스 앱이 연장 rect.component {
  렌더 () {
    반품 (
      <react.fragment><p>안녕하세요 세상!</p></react.fragment>
    ))
  }
}

또한이를 사용하여 DOM 계층 외부의 구성 요소 (React Portal과 유사)를 렌더링 할 수 있습니다.

 // 구성 요소를 클래스 포털을 이동할 수있는 포털을 작성하고 있습니다.
  // 먼저, 우리는 div 요소 생성자를 만듭니다 () {
    감독자();
    this.el = document.createElement ( "div");
  }

  // 마운트 후, 구성 요소 구성 요소의 자식 요소를 추가합시다.
    Portalroot.appendChild (this.el);
  };

  // 구성 요소가 DOM에서 제거되면 자식 요소 구성 요소 willUnmount = () => {도 제거합니다.
    Portalroot.removechild (this.el);
  };

  // 아, 이제 우리는 구성 요소와 자식 요소를 필요에 따라 렌더링 () 렌더링 할 수 있습니다.
    const {children} = this.props;
    Return Reactdom.createPortal (children, this.el);
  }
}

물론 render() 숫자와 문자열을 렌더링 할 수 있습니다 ...

 클래스 앱이 연장 rect.component {
  렌더 () {
    "Hello World!"
  }
}

그리고 null 또는 boolean 값 :

 클래스 앱이 연장 rect.component {
  렌더 () {
    널 리턴
  }
}

componentDidMount ()

이름 componentDidMount() 가 그 의미를 나타 냅니까? 이 방법은 구성 요소가 장착 된 후 (즉, DOM에 연결됨) 호출됩니다. React에서 데이터를 얻는 것에 대해 쓴 다른 튜토리얼에서는 데이터를 얻기 위해 API에 요청하려는 곳입니다.

우리는 당신의 페치 방법을 사용할 수 있습니다 :

 Fetchusers () {
  Fetch (`https : // jsonplaceholder.typicode.com/user`)
    .Then (응답 => response.json ())
    . (data =>
      this.setstate ({
        사용자 : 데이터,
        IsLoading : False,
      })
    ))
  .catch (error => this.setState ({error, isloading : false}));
}

그런 다음 componentDidMount() hook에서 메소드를 호출하십시오.

 componentDidMount () {
  this.fetchusers ();
}

이벤트 리스너를 추가 할 수도 있습니다.

 componentDidMount () {
  el.addeventListener ()
}

매우 간결합니까?

static getDerivedStateFromProps ()

이것은 약간의 장점이지만, static getDerivedStateFromProps() 소리만큼 복잡하지 않습니다. 마운트 단계의 render() 메소드 이전과 업데이트 단계 전에 호출됩니다. 객체를 반환하여 구성 요소의 상태를 업데이트하거나 업데이트 할 내용이없는 경우 null 업데이트합니다.

작동 방식을 이해하려면 카운터 상태에 대한 특정 값을 설정하는 카운터 구성 요소를 구현하겠습니다. 이 상태는 maxCount 의 값이 더 높은 경우에만 업데이트됩니다. maxCount 부모 구성 요소에서 전달됩니다.

이것은 부모 구성 요소입니다.

 클래스 앱이 연장 rect.component {
  생성자 (소품) {
    슈퍼 (소품)

    this.textinput = react.createref ();
    this.state = {
      가치 : 0
    }
  }

  handleIncrement = e => {
    e.preventDefault ();
    this.setstate ({value : this.state.value 1})
  };

  handledecrement = e => {
    e.preventDefault ();
    this.setstate ({value : this.state.value -1})
  };

  렌더 () {
    반품 (
      <react.fragment><p>최대 수 : {this.state.value}</p>
           
          -
        <counter maxcount="{this.state.value}"></counter></react.fragment>
    ))
  }
}

maxCount 의 값을 높이는 버튼이 있으며, 이는 Counter 구성 요소로 전달됩니다.

 클래스 카운터는 react.component {
  상태 = {
    카운터 : 5
  }

  static getderivedstatefromprops (NextProps, Prevstate) {
    if (prevstate.counter <nextprops.maxcount : nextprops.maxcount>
        <p>수 : {this.state.counter}</p>

      
    ))
  }
}</nextprops.maxcount>

Counter 구성 요소에서 counter 가 maxCount 보다 작은지 확인합니다. 그렇다면 maxCount 의 값에 counter 합니다. 그렇지 않으면, 우리는 아무것도하지 않습니다.

업데이트 단계

업데이트 단계는 구성 요소의 소품 또는 상태가 변경 될 때 발생합니다. 마운트와 마찬가지로 업데이트에는 자체 사용 가능한 메소드 세트가 있으며 다음에 소개합니다. 즉, render() 와 getDerivedStateFromProps() 도이 단계에서 발사 될 것이라는 점에 주목할 가치가 있습니다.

shouldcomponentupdate ()

구성 요소의 상태 또는 소품이 변경되면 shouldComponentUpdate() 메소드를 사용하여 구성 요소를 업데이트 해야하는지 제어 할 수 있습니다. 이 방법은 렌더링이 발생하기 전에 및 상태 및 소품이 접수 될 때 호출됩니다. 기본 동작이 true 입니다. 상태 또는 소품이 변경 될 때마다 다시 렌더링하려면 다음을 수행합니다.

 꼭
  this.state.value! == Nextstate.value를 반환합니다.
}

false 가 반환되면 구성 요소가 업데이트되지 않고 대신 render() 메소드를 호출하여 구성 요소를 표시합니다.

getSnaphotbeforeupdate ()

우리가 할 수있는 한 가지는 어느 시점에서 구성 요소의 상태를 캡처하는 것입니다. 이것은 getSnapshotBeforeUpdate() 설계된 것입니다. render() 이후에 호출되지만 DOM에 대한 새로운 변경 사항을 저지르기 전에. 리턴 값은 componentDidUpdate() 의 세 번째 매개 변수로 전달됩니다.

이전 상태와 소품을 매개 변수로 사용합니다.

 getSnapshotbeforeupdate (prevprops, prevstate) {
  // ...
}

제 생각에는이 접근법에 대한 사용 사례가 거의 없습니다. 자주 사용하지 않을 수있는 수명주기 방법입니다.

componentDidupdate ()

메소드 목록에 componentDidUpdate() 를 추가하여 이름이 대략 모든 것을 말합니다. 구성 요소가 업데이트되면이 방법을 사용하여 현재이 방법을 연결하여 구성 요소의 이전 소품 및 상태로 전달할 수 있습니다.

 componentDidupdate (prevprops, prevstate) {
  if (prevstate.counter! == this.state.counter) {
    // ...
  }
}

getSnapshotBeforeUpdate() 사용한 경우 componentDidUpdate() 에 리턴 값을 매개 변수로 전달할 수도 있습니다.

 ComponentDidupDate (PrevProps, Prevstate, Snapshot) {
  if (prevstate.counter! == this.state.counter) {
    // ....
  }
}

제거 단계

우리는 여기서 마운트 단계의 반대를 거의 본다. 예상대로, 제거는 DOM에서 구성 요소를 지우고 더 이상 사용할 수 없을 때 제거됩니다.

여기에는 하나의 방법 만 있습니다 : componentWillUnmount()

이것은 구성 요소가 제거되고 파괴되기 전에 호출됩니다. 이곳 componentDidMount() 구성 요소 잎 후에 필요한 청소를 수행하려는 곳입니다.

 // 이벤트 삭제 리스너 componentWillUnmount () {
  el.removeeventListener ()
}

오류 처리 단계

구성 요소에 문제가 발생하여 오류가 발생할 수 있습니다. 이 문제를 해결하기 위해 오류 경계를 한동안 사용해 왔습니다. 이 오류 경계 구성 요소는 가능한 오류를 처리하는 데 도움이되는 몇 가지 방법을 사용합니다.

getDerivedStateFromError ()

우리는 getDerivedStateFromError() 사용하여 자식 구성 요소에서 발생하는 오류를 포착 한 다음이를 사용하여 구성 요소의 상태를 업데이트합니다.

 Class ErrorBoundary 확장 rect.component {

  생성자 (소품) {
    슈퍼 (소품);
    this.state = {
      haserror : 거짓
    };
  }

  static getDerivedStateFromError (오류) {
    return {haserror : true};
  }

  렌더 () {
    if (this.state.haserror) {
      반품 (
        <h1 id="죄송합니다-뭔가-잘못되었습니다">죄송합니다. 뭔가 잘못되었습니다 :(</h1>
      );
    }

    this.props.children;
  }
}

이 예에서는 하위 구성 요소에서 오류가 발생하면 ErrorBoundary 구성 요소에 "아, 일부 문제가 발생했습니다"가 표시됩니다.

componentDidCatch ()

getDerivedStateFromError() 오류 로깅과 같은 부작용의 경우 구성 요소의 상태를 업데이트하는 데 적합하지만 componentDidCatch() 커밋 단계에서 호출되므로 DOM이 업데이트되었으므로 사용해야합니다.

 componentDidCatch (오류, 정보) {
  // 서비스 오류 로그}

getDerivedStateFromError() 및 componentDidCatch() 모두 ErrorBoundary 구성 요소에서 사용할 수 있습니다.

 Class ErrorBoundary 확장 rect.component {

  생성자 (소품) {
    슈퍼 (소품);
    this.state = {
      haserror : 거짓
    };
  }

  static getDerivedStateFromError (오류) {
    return {haserror : true};
  }

  componentDidCatch (오류, 정보) {
    // 서비스 오류 로그}

  렌더 () {
    if (this.state.haserror) {
      반품 (
        <h1 id="죄송합니다-뭔가-잘못되었습니다">죄송합니다. 뭔가 잘못되었습니다 :(</h1>
      );
    }

    this.props.children;
  }
}

이것이 React 구성 요소의 수명주기입니다!

React 구성 요소가 DOM과 어떻게 상호 작용하는지 이해하는 것은 멋진 일입니다. 일부 "마법"이 일어날 것이라고 생각하기는 쉽고 페이지에 무언가가 나타날 것입니다. 그러나 React 구성 요소의 수명주기는이 광기가 질서 정연하다는 것을 보여 주며, 구성 요소가 DOM에 도달 한 시점부터 사라질 때까지 어떤 일이 발생하는지에 대해 많은 제어를 제공하는 것을 목표로합니다.

우리는 비교적 짧은 공간에서 많은 것들을 다루지 만, React가 어떻게 처리하는지, 각 처리 단계에서 어떤 기능을 가지고 있는지에 대한 좋은 아이디어를 제공합니다. 여기에 소개 된 것에 대해 명확하지 않다면 언제든지 질문 해 주시면 최선을 다해 도와주고 싶습니다!

위 내용은 반응 수명주기의 원의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!