반응 수명주기는 여러 단계로 나뉩니다.

반응 수명 주기는 3단계로 나뉩니다. 1. 구성 요소가 처음으로 DOM 트리에서 렌더링되는 프로세스를 나타내는 초기화 단계라고도 하는 생성 단계 2. 업데이트 단계 , 존재 단계라고도 하며 구성 요소가 다시 렌더링되는 프로세스를 나타냅니다. 3. 파기 단계라고도 하는 언로드 단계는 DOM에서 구성 요소가 삭제되는 프로세스를 나타냅니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

리액트 라이프사이클은 여러 단계로 구분됩니다

라이프사이클 개념은 특히 경제, 환경, 기술, 사회 등 여러 분야에서 널리 사용됩니다. 그 기본 의미는 "전체에서"로 대중적으로 이해될 수 있습니다. "Cradle-to-Grave" 프로세스

Vue와 마찬가지로 전체 React 구성 요소 수명 주기에는 생성, 데이터 초기화, 템플릿 컴파일, Dom 마운트→렌더링, 업데이트→렌더링, 제거 등의 일련의 프로세스가 포함됩니다.

프로세스

여기서 우리는 주로 React16.4 이후의 라이프 사이클에 대해 이야기합니다. 이는 세 단계로 나눌 수 있습니다:

• 생성 단계

• 업데이트 단계

• 제거 단계

생성 단계

생성 stage 주로 다음과 같은 Life Cycle Method로 나뉜다.

• Constructor (영어가 삼켜지니까 왜 중국어를 쓰는지 묻지마라. 너무 어렵다)

• getDerivedStateFromProps

• render

• comComponentDidMount

Constructor

인스턴스 프로세스 중에 자동으로 호출되는 메소드 내부에서 super 키워드를 통해 상위 컴포넌트의 props를 얻습니다

이 메소드에서 일반적인 작업은 이 Loading 메소드를 상태로 유지하거나

getDerivedStateFromProps

이 메소드는 새로운 라이프사이클 메소드이므로 컴포넌트 인스턴스에 액세스할 수 없습니다.

실행 타이밍: 컴포넌트 생성 및 업데이트 단계 여부 이는 props 변경 또는 상태 변경이며, 각 렌더링 메서드 전에

도 호출합니다. 첫 번째 매개변수는 업데이트할 props이고 두 번째 매개변수는 이전 상태의 상태를 비교하여 몇 가지 제한 사항을 추가할 수 있습니다. 쓸모없는 상태를 방지하려면

이 메서드는 새 객체를 새 상태로 반환하거나 상태를 업데이트할 필요가 없음을 나타내기 위해 null을 반환해야 합니다.

render

클래스 구성 요소가 렌더링을 위해 구현해야 하는 메서드입니다. DOM 구조에 접근할 수 있으며 컴포넌트 상태 및 속성 속성에 액세스할 수 있습니다

참고: 렌더링 시 setState를 설정하지 마세요. 그렇지 않으면 무한 루프가 발생하여 메모리 충돌이 발생합니다

comComponentDidMount

컴포넌트는 실제 DOM 구조에 마운트된 후 실행됩니다. DOM 노드이며 렌더링 메소드 이후에 실행됩니다

이 메소드는 주로 일부 데이터 수집, 이벤트 모니터링 및 기타 작업을 실행하는 데 사용됩니다

업데이트 단계

이 단계의 기능은 주로 다음 메소드입니다.

• getDerivedStateFromProps

• shouldComponentUpdate

• render

• getSnapshotBefore Update

• comComponentDidUpdate

getDerivedStateFromProps

이 메소드는 위와 같이 소개됩니다.

shouldComponentUpdate

는 컴포넌트에 알리는 데 사용됩니다. 현재 props 및 상태를 기반으로 구성 요소를 다시 렌더링해야 하는지 여부를 스스로 결정합니다. 기본적으로 true를 반환합니다

실행 타이밍: 새 props 또는 상태에 도달하면 호출되며 구성 요소가 업데이트되었는지 여부를 알려줍니다. 일반적으로 이 주기 메서드에서는 효율성에 영향을 미치는 심층 비교를 수행하지 않는 것이 좋습니다. SetState는 동시에 호출할 수 없습니다. 그렇지 않으면 업데이트를 호출하는 무한 루프가 발생합니다.

소개는 위와 같습니다

이 주기 함수는 렌더링 후에 실행되며 실행 시 DOM 요소가 업데이트되지 않았습니다이 메서드에서 반환된 Snapshot 값은 다음과 같이 전달됩니다. componentDidUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('#enter getSnapshotBeforeUpdate');
    return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('#enter componentDidUpdate snapshot = ', snapshot);
}

이 메서드의 목적은 구성 요소가 업데이트되기 전에 구성 요소의 스크롤 위치와 같은 일부 정보를 얻는 것입니다. 이 정보를 기반으로 일부 UI 시각적 상태를 복원할 수 있습니다.

실행 타이밍: 컴포넌트 업데이트 완료 후 트리거이 방법에서는 데이터 가져오기, DOM 스타일 수정 등 전후의 props 및 state 변경을 기반으로 해당 작업을 수행할 수 있습니다.

언로드 단계

이 방법은 구성 요소가 제거되기 전에 사용되며 등록된 일부 수신 이벤트를 정리하거나 구독된 네트워크 요청을 취소하는 등의 작업을 수행합니다. 구성 요소 인스턴스가 제거되면 다시 마운트되지 않습니다. , 그러나 재생성만 가능

권장 학습: "

"

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