React Native 에서 구성 요소 의 생명주기

개술
안 드 로 이 드 가 개발 한 뷰 처럼 리 액 트 네 이 티 브(RN)의 구성 요소 에 도 라 이 프 사이클(Lifecycle)이 있다.라 이 프 사이클 이란 한 대상 이 생 성 되 기 시작 해서 마지막 소멸 까지 겪 은 상태 로 라 이 프 사이클 을 이해 하 는 것 이 합 리 적 인 개발 의 관건 이다.RN 구성 요소 의 수명 주기 정 리 는 다음 과 같 습 니 다.

그림 과 같이 구성 요소 의 생명 주 기 를 크게 세 단계 로 나 눌 수 있다.
4.567917.첫 번 째 단계:구성 요소 의 첫 번 째 그리 기 단계 입 니 다.그림 의 위 점선 상자 에서 구성 요소 의 로드 와 초기 화 를 완 료 했 습 니 다4.567917.두 번 째 단계:구성 요소 가 실행 과 상호작용 단계 에 있 습 니 다.그림 에서 왼쪽 아래 점선 상자 와 같이 이 단계 의 구성 요 소 는 사용자 의 상호작용 을 처리 하거나 이벤트 업데이트 인터페이스 를 받 을 수 있 습 니 다4.567917.세 번 째 단계:구성 요소 의 마 운 트 해제 가 사라 지 는 단계 입 니 다.그림 에서 오른쪽 아래 에 있 는 점선 상자 에서 구성 요소 의 청 소 를 합 니 다라 이 프 사이클 리 셋 함수
다음은 생명주기 중의 각 반전 함 수 를 상세 하 게 소개 한다.
getDefaultProps
구성 요소 가 생 성 되 기 전에 getDefaultProps()를 먼저 호출 합 니 다.이것 은 전역 호출 입 니 다.엄 밀 히 말 하면 구성 요소 의 생명주기 의 일부분 이 아 닙 니 다.구성 요소 가 생 성 되 고 불 러 오 면 먼저 getInitialState()를 호출 하여 구성 요소 의 상 태 를 초기 화 합 니 다.
componentWillMount
그리고 구성 요 소 를 불 러 올 준 비 를 하고 componentWillMount()를 호출 합 니 다.그 원형 은 다음 과 같 습 니 다.

void componentWillMount() 

이 함수 호출 시 기 는 구성 요소 가 생 성 되 고 상 태 를 초기 화 한 후 render()를 처음 그리 기 전 입 니 다.여기 서 업무 초기 화 작업 을 할 수도 있 고 구성 요소 상 태 를 설정 할 수도 있 습 니 다.이 함 수 는 전체 생명주기 에서 한 번 만 호출 된다.
componentDidMount
구성 요소 가 처음 그 려 진 후에 componentDidMount()를 호출 하여 구성 요소 가 불 러 왔 음 을 알 립 니 다.함수 원형 은 다음 과 같 습 니 다.

void componentDidMount() 

이 함수 가 호출 되 었 을 때 가상 DOM 이 구축 되 었 습 니 다.이 함수 에서 요소 나 하위 구성 요 소 를 가 져 올 수 있 습 니 다.주의해 야 할 것 은 RN 프레임 워 크 는 하위 구성 요소 의 componentDidMount()를 먼저 호출 한 다음 부모 구성 요소 의 함 수 를 호출 하 는 것 입 니 다.이 함수 부터 JS 의 다른 프레임 워 크 와 상호작용 을 할 수 있 습 니 다.예 를 들 어 시간 계산 setTimeout 이나 setInterval 을 설정 하거나 네트워크 요청 을 할 수 있 습 니 다.이 함수 도 한 번 만 호출 된다.이 함수 이후 안정 적 인 운행 상태 에 들 어가 이벤트 가 실 행 될 때 까지 기 다 렸 습 니 다.
componentWillReceiveProps
구성 요소 가 새로운 속성(props)을 받 으 면 componentWillReceiveProps()를 호출 합 니 다.원형 은 다음 과 같 습 니 다.

void componentWillReceiveProps( 
 object nextProps
)

인자 nextProps 를 입력 하면 설정 할 속성 입 니 다.오래된 속성 은 this.props 를 통 해 얻 을 수 있 습 니 다.이 반전 함수 에 서 는 속성의 변화 에 따라 this.setState()를 호출 하여 구성 요소 상 태 를 업데이트 할 수 있 습 니 다.여기 서 업데이트 상 태 를 호출 하 는 것 은 안전 하 며 추가 render()호출 을 촉발 하지 않 습 니 다.다음 과 같다.

componentWillReceiveProps: function(nextProps) { 
 this.setState({
  likesIncreasing: nextProps.likeCount > this.props.likeCount
 });
}

shouldComponentUpdate
구성 요소 가 새로운 속성 과 상태 변 화 를 받 으 면 shouldComponentUpdate(...)를 호출 합 니 다.함수 원형 은 다음 과 같 습 니 다.

boolean shouldComponentUpdate( 
 object nextProps, object nextState
)

인자 nextProps 를 입력 하 십시오.위의 componentWillReceiveProps 함수 와 마찬가지 로 nextState 는 구성 요소 가 업 데 이 트 될 상태 값 을 표시 합 니 다.이 함수 의 반환 값 은 구성 요 소 를 업데이트 할 지 여 부 를 결정 합 니 다.true 가 업데이트 가 필요 하 다 고 표시 하면 다음 업데이트 절 차 를 계속 진행 합 니 다.그렇지 않 으 면 업데이트 하지 않 고 대기 상태 로 바로 들 어 갑 니 다.
기본적으로 이 함 수 는 데이터 가 변 할 때 UI 가 동기 화 될 수 있 도록 true 로 영원히 돌아 갑 니 다.대형 프로젝트 에서 이 함 수 를 다시 불 러 올 수 있 습 니 다.변경 전후 속성 과 상 태 를 확인 하여 UI 가 업데이트 되 어야 하 는 지 여 부 를 결정 하고 응용 성능 을 효과적으로 향상 시 킬 수 있 습 니 다.
componentWillUpdate
구성 요소 상태 나 속성 이 바 뀌 고 위의 shouldComponentUpdate(...)가 true 로 돌아 오 면 구성 요 소 를 정확하게 업데이트 하고 componentWillUpdate()를 호출 합 니 다.함수 원형 은 다음 과 같 습 니 다.

void componentWillUpdate( 
 object nextProps, object nextState
)

입력 매개 변 수 는 shouldComponent Update 와 마찬가지 로 이 반전 에서 인터페이스 를 업데이트 하기 전에 해 야 할 일 을 할 수 있 습 니 다.특히 주의해 야 할 것 은 이 함수 에서 this.setState 를 사용 하여 상 태 를 수정 할 수 없다 는 것 이다.이 함수 가 호출 되면 nextProps 와 nextState 를 각각 this.props 와 this.state 에 설정 합 니 다.이 함수 에 이 어 render()를 호출 하여 인터페이스 를 업데이트 합 니 다.
componentDidUpdate
render()업데이트 완료 인터페이스 를 호출 한 후 componentDidUpdate()를 호출 하여 알림 을 받 습 니 다.함수 원형 은 다음 과 같 습 니 다.

void componentDidUpdate( 
 object prevProps, object prevState
)

여기에서 속성 과 상태의 업 데 이 트 를 완 료 했 기 때문에 이 함수 의 입력 매개 변 수 는 prevProps 와 prevstate 로 바 뀌 었 습 니 다.
componentWillUnmount
구성 요소 가 인터페이스 에서 제거 되 려 면 componentWillUnmount()를 호출 합 니 다.함수 원형 은 다음 과 같 습 니 다.

void componentWillUnmount() 

이 함수 에 서 는 타이머 취소,네트워크 요청 등 구성 요소 와 관련 된 청 소 를 할 수 있 습 니 다.
총결산
여기까지 RN 의 구성 요소 의 완전한 생명 을 소 개 했 습 니 다.앞의 그림 을 돌 이 켜 보면 비교적 뚜렷 합 니 다.생명주기 의 반전 함 수 를 다음 표 로 요약 합 니 다.
라 이 프 사이클
호출 횟수
setSate()를 사용 할 수 있 습 니까?
getDefaultProps
1(전역 호출 1 회)
아니.
getInitialState
1
아니.
componentWillMount
1
예.
render
>=1
아니.
componentDidMount
1
예.
componentWillReceiveProps
>=0
예.
shouldComponentUpdate
>=0
아니.
componentWillUpdate
>=0
아니.
componentDidUpdate
>=0
아니.
componentWillUnmount
1
아니.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.