세일즈 포스 LWC는 그의 아들에 의해 수명주기 및 사용 LWC LWC 장면을 이해하는 것은 내장 조립 방법

1、什么是父子组件

概述

아들의 구성 요소는 구성 요소, 즉 조합 작성 구성 요소를 호출 할 수 있습니다, LWC이 결합하여 더는 직설적 인 넣어 함께 넣어, 그리고 마지막으로 큰 완전한 어셈블리를 형성한다. 또한 쉽게 미래의 확장, 그 이유는 구성 요소의 조합 사이의 코드 반복 속도의 방법으로, 할 수있는 실제 개발에 나타납니다 어셈블리의 많은 구성 요소의 기능이 너무 높지 않을 것입니다. 당신은 큰 구성 요소에 약간의 추가 기능을 필요로 할 때, 단순히 해당 함수를 작성하고, 원래의 코드와 로직 구성 요소에 영향을주지 않고, 여기에 추가.
소유자 : 소유자, 소유자가 할 수있다 현재 템플릿

• (서브 어셈블리 세트 속성 (속성)의 하위 구성 요소는,이 속성은 서브 조립체를 공개 때에 프로퍼티 대응 때 호출) 구성 요소에 속성을 설정 공개
• 구성 요소에 대한 호출 방법 (즉, 메소드 호출 할 수있는 서브 어셈블리)
• 모든 이벤트는 구성 요소에 의해 해고를 수신 (당신은 하위 구성 요소에 의해 트리거 모든 이벤트를 수신 할 수 있습니다)

컨테이너 : 소유자에,하지만 다른 구성 요소가 포함되어 있습니다

• 컴포넌트는 대중에 포함 된 변수를 읽을 수있다, 할 수없는 편집
• 성분 캔 호출 방법에 포함
• 당신은 구성 요소에 포함 된 해당 이벤트의 거품 형식을들을 수 있습니다. (이벤트는 버블 / 캡처로 나눌 수 있습니다)
  소유자 및 컨테이너가 포함 된이 문서에 언급되지 않은 지식의 일부는 인상을 가질 수에 대한 것입니다 다음 업데이트의 기사 후!

2, LWC 어셈블리의 라이프 사이클의 개요

그것은 부모 - 자식 관계가 있으면 1, 부모 구성 요소가 수행하는 생성자 () 메소드 :

• 첫 번째 문장의 생성자 ()이 있어야합니다 슈퍼 () 및 매개 변수없이, 당신은 키워드 후이 문을 사용할 수 있습니다
• 필요한 경우 어셈블리가 아직, 렌더링되지 않았기 때문에, 등 생성자 쿼리 요소를 이동하지 마십시오 connectedCallback의 쓰기) (내부
• API는 ** 선언이 구성 요소가 생성되지 않았기 때문에 ** @ 변수를 사용하지 마십시오

2, 어느 값이 대기 공용 변수를 갱신하는 경우, 공용 변수가 존재하는지 체크 제 업데이트 할

이 방법은 한 요소가 다시 렌더링하거나 다시 삽입 한, 상응하는 요소를 확인할 수 실행될 때 3 완료 부모 컴포넌트 렌더링 즉시 connectedCallback 방법을 수행되며, 이는 여러 차례 호출 될

4, connectedCallback는 구현 후, 부모 구성 요소 렌더링 완료

5 일 후, 서브 어셈블리 수행 생성자

6, 갱신 요구의 공개 키의 값을 업데이트 할

도 7에 도시 된 바와 같이, DOM 노드에 삽입되는 서브 어셈블리는 다음 호출 connectedCallback의 방법

8 서브 어셈블리 렌더링 호 부성분 renderedCallback 방법

9, 아버지와 아들이 구성 요소 후 렌더링했을 때, 부모 구성 요소가 상위 구성 요소 호출에 renderedCallback을 () 메소드

3, 샘플 코드

sonLifeCycle

sonLifeCycle.html

<template>
    <lightning-input
        label="Description"
        type="text"
    ></lightning-input>
</template>

sonLifeCycle.js

import { LightningElement } from 'lwc';

export default class SonLifeCycle extends LightningElement {
    
    constructor(){
        super();
        console.log('son constructor');
    }

    connectedCallback(){
        console.log('son has been insert into Dom');
    }

    renderedCallback(){
        console.log('son has been rendered');
    }

    disconnectedCallback(){
        console.log('son has been disconnected');
    }
}

parentLifeCycle

ParentLifeCycle.html

<template>
    <lightning-input 
        label='Show?'
        onclick={handleButtonClick}
        type='checkbox'
    ></lightning-input>
    
    <template if:true={show}>
        <c-son-life-cycle></c-son-life-cycle>
    </template>
</template>

ParentLifeCycle.js

import { LightningElement, api } from 'lwc';

export default class ParentLifeCycle extends LightningElement {
    
    @api
    show;

    constructor(){
        super();
        this.show = false;//子组件不会被显示，即刚开始并不会有子组件中任何函数的信息
        console.log('parent constructor');
    }

    handleButtonClick(event){
        this.show = event.target.checked;
    }

    connectedCallback(){
        console.log('the parentClass from connectedCallback => ' + this.template.querySelector('lightning-input'));
        console.log('parent has been insert into Dom');
    }

    renderedCallback(){
        console.log('the parentClass from renderedCallback => ' + this.template.querySelector('lightning-input'));
        console.log('parent has been rendered');
    }

    disconnectedCallback(){
        console.log('parent has been disconnected');
    }
}

이 두 LWC 후 콘솔 창을 엽니까지 배포 할 때, 당신은 볼 것이다 :

쇼가 거짓이므로, 서브 어셈블리가 표시되지 않습니다 당연히하지 않습니다 어떤 방법 하위 호출합니다. 그러나 우리는 생성자 디스플레이 부모 구성 요소를 볼 수있는 다음 connectedCallback이며, 다음 renderedCallback이다.
그럼 우리가 고려할 수 :
구성 요소가 페이지에서 렌더링되기 전에, 생성자는 결국, 생성자는 일반적으로 변수 할당 및 초기화 작업이며, 실행 첫 번째가 될 것입니다
구성 요소에 연결되어있을 때 단지 렌더링 시간 , connectedCallback 메소드를 호출하지만, 구성 요소가 렌더링되지 않기 때문에 정보의 완전한 일부는 현재의 구성 요소에 대해 얻을 수없는,
그리고 어셈블리 성공이되었을 때 구성 요소가 렌더링 마지막 때 완성 된 호출 renderedCallback는,이 시간 정보를 얻기 위해 갈 때

당신이 체크 박스를 클릭하면, 당신은 발견 할 것이다

renderedCallback 부모 구성 요소를 두 번 수행 이유를 요청할 수 있습니다? ?
첫째 : 쇼의 값이 변경 될 때 당신이 체크 박스를 클릭하면 상위 구성 요소의 요구 사항이 추가로 렌더링 할 수 있도록이 예에서, 각 구성 요소가 수정 된 후 것을 renderedCallback 있도록, 내용과 상위 구성 요소에 해당 변경 수행되는
두 번째 서브 어셈블리가 표시되는, 두 그래프를 표시하고,이 성분의 콘텐츠가 변경되는 상위에 해당하기 때문에 이전하는 이유 입력 :. . .
(당신은 당신이 전체 상위 - 하위 구성 요소 렌더링 프로세스를 볼 수 true로 변경되었습니다 쇼의 가치 상위 구성 요소의 생성자에서 직접 볼 수 있습니다)

다시 체크 박스를 클릭하면 볼 수 있습니다

여기 renderedCallback 이전과 동일을 두 번 수행하다 왜 이유를,
그러나 더 자식 disconnectedCallback 구성 요소보다, 그것은 하위 구성 요소가 제거되는 것을 의미 또는 후 페이지에서 사라 이 방법을 실행할

4, LWC 방법을 사용하여 내장 된 장면

요약 :

constructor

자바 클래스 생성자와 유사한, 초기화 등,하지만 구성 요소가 완료 렌더링되지 않기 때문에, 구성 요소 요소에 값을 조회하는 다른 작업을하지 않는다

connectedCallback

구성 요소가 페이지에 연결되어있는 경우이를 임시 호출 또는 현재 구성 요소에 대한 정보를 얻을 수 있지만, 당신은 내가 현재의 URL을 얻을 수있는 다시이 ((멤버 변수)를 때에 프로퍼티를 얻을로 이동하거나 현재 페이지 URL의 값과 다른 작업을 얻을 수 있습니다 당신은) 자격을하고 다른 페이지의 예로 이동하지 않는 경우

renderedCallback

현재 구성 요소가 하위 어셈블리 요의 내부를 포함하여, 렌더링, 현재 renderedCallback 구성 요소 카자흐스탄 (마지막 예제를 통해 살펴 백)의 마지막 실행은 지금 무자 비한 얻을 수 있도록 요소는 하위 요소 등의 작업을 포함한다

disconnectedCallback

구성 요소가 제거되거나 사라질 때 호출 될 때

예 목적은 복잡한 기능이 있지만, 당신은 반드시 알 수 없습니다 당신이 방법의 특성을 모르는 이러한 방법의 사용을 이해함으로써 장면 작업 뒤에 구덩이를 피할 수 있도록하는 방법을 쓰기에없는, 매우 간단합니다 결국 문제 자체가 코드의 논리 오류 또는 구성 요소의 특징

PS : 지역 이야기가 불분명하거나 잘못된 경우, 친절 메시지 교환을 정정 해줘, 감사합니다