React Native 구성 요소의 수명주기는 무엇입니까?

이번에는 React Native 컴포넌트의 라이프사이클은 얼마나 되는지, 그리고 React Native 컴포넌트 라이프사이클의 주의사항은 무엇인지 알아보겠습니다.

모든 분들을 위한 React Native 컴포넌트의 라이프사이클을 소개합니다. 관심이 있으신 분들은 한 번 살펴보시기 바랍니다.

Android 개발의 View와 마찬가지로 React Native(RN)의 구성 요소에도 수명 주기가 있습니다. 소위 생명주기는 객체가 처음 생성되어 최종 소멸될 때까지 거치는 상태입니다. 생명주기를 이해하는 것은 합리적인 개발의 핵심입니다. RN 구성요소의 수명주기는 다음과 같이 구성됩니다

그림에 표시된 것처럼 구성 요소 수명 주기는 대략 세 단계로 나눌 수 있습니다.

• 첫 번째 단계: 그림의 상단 점선 상자에 표시된 것처럼 구성 요소의 첫 번째 그리기 단계로 구성 요소의 로딩 및 초기화가 완료됩니다.

• 두 번째 단계: 실행 및 상호 작용 단계입니다. 그림과 같이 구성 요소 왼쪽 하단에 있는 점선 상자입니다. 이 단계에서는 구성 요소가 사용자 상호 작용을 처리하거나 이벤트를 수신하여 인터페이스를 업데이트할 수 있습니다.

• 세 번째 단계: 그림의 오른쪽 하단에 있는 점선 상자에서 일부 구성 요소가 여기에서 정리 작업을 수행합니다.

수명주기 콜백 기능

다음으로 라이프사이클의 각 콜백 함수를 자세히 소개하겠습니다.

getDefaultProps

구성 요소가 생성되기 전에 getDefaultProps()가 먼저 호출됩니다. 이는 엄밀히 말하면 구성 요소 수명 주기의 일부가 아닙니다. 구성 요소가 생성되고 로드되면 getInitialState()가 먼저 호출되어 구성 요소의 상태를 초기화합니다.

컴포넌트WillMount

그런 다음 구성 요소 로드를 준비하기 위해 componentWillMount()가 호출되며 해당 프로토타입은 다음과 같습니다.

void componentWillMount()

이 함수는 구성 요소가 생성되고 상태가 초기화된 후, 처음으로 render()가 그려지기 전에 호출됩니다. 여기에서 일부 비즈니스 초기화 작업을 수행할 수 있으며 구성 요소 상태를 설정할 수도 있습니다. 이 함수는 전체 수명주기 동안 한 번만 호출됩니다.

componentDidMount

구성 요소가 처음으로 그려진 후에는 구성 요소가 로드되었음을 알리기 위해 componentDidMount()가 호출됩니다. 함수 프로토타입은 다음과 같습니다:

void componentDidMount()

이 함수가 호출되면 해당 가상 DOM이 구성되고 이 함수에서 해당 요소 또는 하위 구성 요소를 얻을 수 있습니다. RN 프레임워크는 먼저 하위 컴포넌트의 componentDidMount()를 호출한 다음 상위 컴포넌트의 함수를 호출한다는 점에 유의해야 합니다. 이 함수부터 시작하여 타이밍 setTimeout 또는 setInterval 설정, 네트워크 요청 시작 등 다른 JS 프레임워크와 상호 작용할 수 있습니다. 이 함수도 한 번만 호출됩니다. 이 기능 후에는 안정적인 실행 상태에 들어가고 이벤트가 트리거될 때까지 기다립니다.

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는 구성 요소가 업데이트하려는 상태 값을 나타냅니다. 이 function의 반환 값은 구성 요소를 업데이트해야 하는지 여부를 결정합니다. true인 경우 업데이트가 필요하며 후속 업데이트 프로세스가 계속됩니다. 그렇지 않으면 업데이트되지 않고 바로 대기 상태로 들어갑니다.

기본적으로 이 함수는 데이터가 변경될 때 UI가 동기적으로 업데이트될 수 있도록 항상 true를 반환합니다. 대규모 프로젝트에서는 이 기능을 직접 오버로드할 수 있으며, 변경 전후의 속성과 상태를 확인하여 UI 업데이트 여부를 판단하면 애플리케이션 성능을 효과적으로 향상시킬 수 있습니다.

componentWillUpdate

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()，其函数原型如下：

void componentWillUpdate( 
 object nextProps, object nextState
)

输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 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 的组件的完整的生命都介绍完了，在回头来看一下前面的图，就比较清晰了，把生命周期的回调函数总结成如下表格：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

위 내용은 React Native 구성 요소의 수명주기는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!