미니 프로그램: wx:key를 사용하여 wx:for의 렌더링 효율성을 향상시킵니다.-미니 프로그램 개발-php.cn

집

위챗 애플릿

미니 프로그램 개발

미니 프로그램: wx:key를 사용하여 wx:for의 렌더링 효율성을 향상시킵니다.

若昕

Apr 01, 2019 pm 02:41 PM

이 기사의 내용은 주로 wx를 개선하기 위해 작은 프로그램에서 wx:key를 사용하는 방법에 대해 설명합니다. : for Understanding의 렌더링 효율성)

wx:key를 추가하지 않은 경우 setData 이후 배열의 데이터가 변경되면 프런트엔드 렌더링 개체가 다시 생성됩니다.

# 🎜🎜#

wx:key를 사용하면 다시 렌더링할 때 해당 객체가 재정렬됩니다. 변경되지 않은 객체는 다시 생성되지 않습니다

공식 설명 참조
데이터가 변경되면 렌더링 레이어가 다시 렌더링됩니다. , 키가 있는 구성 요소를 수정하면 프레임워크는 구성 요소가 자체 상태를 유지하고 목록 렌더링의 효율성을 향상시키기 위해 다시 생성되지 않고 재정렬되도록 보장합니다.

확인이 필요한 질문

wx:key를 추가하면 주어진 키에 따라 정렬되나요?

간단한 테스트 페이지 작성

<block wx:for="{{languages}}" wx:for-item="language" wx:key="id">
  <text class="log-item">{{ language.id }} . {{ language.name }}</text>
</block>

data: {
  languages: [
    {id: 미니 프로그램: wx:key를 사용하여 wx:for의 렌더링 효율성을 향상시킵니다., name: &#39;php&#39;},
    {id: 4, name: &#39;javascript&#39;},
    {id: 3, name: &#39;golang&#39;},
    {id: 2, name: &#39;python&#39;},
    {id: 5, name: &#39;java&#39;},
  ],
},

로그인 후 복사

테스트 결과에 따르면 Sort에는 영향을 미치지 않습니다.

키 이름이 같으면 오류가 보고되나요? 🎜🎜#VM6265:2 wx:key

미니 프로그램: wx:key를 사용하여 wx:for의 렌더링 효율성을 향상시킵니다. #🎜🎜에 동일한 키 {5}를 설정하지 마세요. #이상한 점은 이 경고가 다시 렌더링될 때만 보고된다는 것입니다. 초기화된 경우 동일한 키를 사용해도 경고가 발생하지 않습니다.