미니 프로그램 개발시 조건부 렌더링에 대한 자세한 설명

wx:if

프레임워크에서는 wx:if="{{condition}}"을 사용하여 코드 블록을 렌더링해야 하는지 여부를 결정합니다.

<view wx:if="{{condition}}"> True </view>

wx:elif 및 wx:else를 사용하여 else 블록을 추가할 수도 있습니다.

<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>

block wx:if

이유는 wx:if 태그에 추가해야 하는 컨트롤 속성 입니다. 그러나 여러 구성요소 태그를 한 번에 판단하려면 태그를 사용하여 여러 구성요소를 래핑하고 wx:if 제어 속성을 사용할 수 있습니다.

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view></block>

참고: 는 단지 페이지에 렌더링을 수행하지 않으며 제어 속성만 허용합니다.

wx:if vs Hidden

wx:if의 템플릿에는 데이터 바인딩도 포함될 수 있으므로 wx:if 조건이 값 스위치를 사용하면 프레임워크에는 로컬 렌더링 프로세스가 있습니다. 전환 시 조건 블록이 삭제되거나 다시 렌더링되도록 보장하기 때문입니다.

동시에 wx:if도 게으르다. 초기 렌더링 조건이 false인 경우 프레임워크는 아무것도 하지 않고 조건이 처음으로 true가 되면 부분 렌더링을 시작합니다.

이에 비해 숨김은 훨씬 간단하며 구성 요소는 항상 렌더링되며 표시하고 숨기는 간단한 컨트롤입니다.

일반적으로 wx:if는 전환 비용이 더 높고, Hidden은 초기 렌더링 비용이 더 높습니다. 따라서 빈번한 전환이 필요한 경우에는 Hidden을 사용하는 것이 좋으며, 런타임 중에 조건이 변경될 가능성이 없다면 wx:if가 더 좋습니다.

[관련 추천]

1. 위챗 미니 프로그램 전체 소스코드 다운로드

2.위챗 미니 프로그램 데모: 캐러셀 이미지 변환

3.

WeChat 미니 프로그램 게임 데모에서 다양한 색상 블록 선택

위 내용은 미니 프로그램 개발시 조건부 렌더링에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!