제 경험상 대부분의 학생들은 이 개념을 알고 있습니다. 잘 모른다면, 웹페이지가 로드될 때 브라우저가 온로드 이벤트를 트리거한다는 것을 알아야 하며, 보통 window.onload나 jquery의 $(document).load() 메서드를 사용해 웹페이지가 로드될 때 무엇을 해야 하는지 정의합니다.
앱에서는 이런 종류의 이벤트가 더 풍부합니다. 많은 경우, 사용자가 페이지를 보기 전에 먼저 무언가를 해야 하는데, 가장 흔한 것은 서버에서 데이터를 가져오는 것입니다; 또는 페이지를 떠나려 할 때 무언가를 하세요.
1. 이온 생명 주기 훅 이해
Ionic 3.8.0 기준으로, 이 프레임워크는 페이지 수명 주기의 다양한 단계에서 트리거되는 8개의 훅 함수를 제공합니다.
1.1 ionViewDidLoad
페이지 로드 완료 트리거, 여기서 "로드 완료"는 필요한 자원이 로드되었지만 아직 페이지 상태에 입력되지 않은 상태(사용자가 이전 페이지를 계속 보고 있음)를 의미합니다.
이 훅은 매우 거만한 것으로, 전체 과정에서 단 한 번만 호출됩니다. 즉, 처음 페이지에 들어갈 때 호출되고, 그 이후에는 어떻게 들어가고 나가든 텅 비고 비참한 상태가 됩니다. 백그라운드를 종료하고 소프트웨어를 다시 입력하지 않는 한(웹 페이지를 디버깅할 때 새로고침을 누르는 것도 괜찮습니다).
따라서 이 훅은 서버에서 사용자 데이터를 불러와 캐시에 저장하는 일회성 처리에 적합합니다.
1.2 ionViewWillEnter
문자 그대로 이해하는 것은 "내가 들어간다"는 순간, 페이지가 그냥 전환되기 시작하는 순간입니다. 이 시점에서 페이지 데이터를 사전 처리할 수 있고, 이 훅은 매번 호출됩니다.
1.3 ionViewDidEnter
이 훅이 트리거되면 사용자는 새 페이지에 진입한 것이며(페이지가 활성화됨), 매번 호출됩니다.
이 얘기가 나와서 말인데, 아이오닉의 훅 명명은 대부분의 중국 학생들에게 정말 친절하고, 한 명과 한 명이 문제를 해결할 것입니다. 외부의 화려한(잘못된) 프레임워크와 달리, 준비, 업데이트, 컴플라이드, 디스토리 등 여러 가지 시스템이 있는데, 한 번 기억하고 한 번 잊어버리면 됩니다. (물론, 이건 농담입니다. 구성 요소의 명칭은 프레임워크의 작동 메커니즘과 밀접하게 관련되어 있습니다.)
1.4 ionViewWillLeave(이온뷰윌리브)
페이지 준비(곧 시작됨)는 사용자가 막 뒤로 가기 버튼이나 관련 이벤트를 트리거했을 때 실행됩니다.
1.5 ionViewDidLeave
페이지가 끝나면 비활성 상태가 됩니다.
1.6 ionViewWillUnload
페이지 내 자원이 파괴될 때 트리거된다면, ionViewDidLoad처럼 이 훅도 한 번만 트리거될 거라고 생각하시나요?
1.7 테스트
이전 섹션에서 만든 페이지를 가져와 훅의 하중을 테스트해 봅시다.
이전 섹션에서는 버튼을 이용해 홈페이지에서 TestPage로 이동하는 과정을 구현했고, 이제는 위의 여섯 가지 훅을 TestPage에 추가하고 콘솔을 통해 호출 과정을 관찰합니다.
페이지 테마 섹션 코드는 다음과 같습니다
생성자에 테스트 문장도 추가했다는 점에 참고하세요. Serve 디버깅을 열고 버튼을 클릭한 후 TestPage로 가서 콘솔에서 출력되는 것을 관찰하세요.
처음 등장하는 작품입니다
홈 페이지로 돌아가서 콘솔이 출력하는 것을 관찰해 보세요.
처음으로 페이지에서 떠나기
TestPage에 다시 들어갔다 나갔다 하면서 콘솔이 출력하는 것을 관찰하세요.
두 번째 진입과 퇴장
다음과 같은 결론을 도출할 수 있습니다:
- ionViewDidLoad 전에 생성기가 실행됩니다
- ionViewDidLoad는 페이지에 처음 들어올 때만 실행됩니다
- ionViewWillUnload는 페이지를 떠날 때마다 트리거됩니다
2. 또한 두 개의 가드 훅이 있습니다
처음에 아이오닉은 8개의 훅을 제공한다고 말했지만, 저는 6개만 소개했습니다. 처음 6개의 훅은 공통점을 가지며, 반환 값은 모두 공백(void)입니다. 즉, 해당 시점에 호출되고 어떤 정보도 반환하지 않습니다.
나머지 두 훅은 약간 다르며, ionViewCanEnter와 ionViewCanLeave로, 불리언을 반환할 수 있습니다.
보세요, 방금 시제에 대해 이야기했으니 이제 모드 동사에 대해 이야기할 겁니다. 처음 6개의 훅이 사용자의 방문에 대한 페이지의 수동적 반응이라면, 이제 페이지는 당신이 방문하거나 떠날 수 있도록 의식을 갖게 되었습니다. 아, 이제 페이지가 서 있는 것입니다!
이 두 갈고리는 권위 통제에 더 큰 역할을 하며, 최근에는 '경비병'이라는 매우 유행하는 용어가 있습니다. 이 경비병을 이해하는 방법은 공동체의 문지기이자 다정한 교장, 그리고 고대 살구 꽃 건물에서 수천 가지 자세를 가진 2333년 늙은 가사로 이해할 수 있습니다.
이제 불리언 값을 반환한다는 것을 알았으니, 한번 시도해 보겠습니다. 우리 프로그램에는 비즈니스 로직이 없으니, 여기서 시간 API를 사용해 판단해 보겠습니다
페이지 접근이 차단되어 있습니다
마찬가지로, 페이지를 남기고 싶을 때 ionViewCanLeave가 false로 반환되면 차단됩니다.
반환 작업이 가로채진다
콘솔 인쇄 정보
3 요약
음, 더 이상 쓸데없는 말은 하지 말자면, Ionic은 다음과 같은 라이프사이클 후크를 가지고 있습니다
- ionViewDidLoad는 void를 반환하기 위해 처음 호출됩니다
- ionViewWillEnter 호출 시 void를 반환합니다
- ionViewDidEnter가 호출될 때마다 void를 반환합니다
- ionViewWillLeave는 호출될 때마다 void로 반환됩니다
- ionViewDidLeave는 호출될 때마다 void를 반환합니다
- ionViewWillUnload가 호출될 때마다 void를 반환합니다.
- ionViewCanEnter는 호출될 때마다 불리언을 반환합니다
- ionViewCanLeave는 호출될 때마다 불리언을 반환합니다
|
게시됨 2018. 6. 21. 오전 10:30:06
|
|
|
|
