목록 렌더링에서 wx:key의 역할과 조건부 렌더링 wx:if와 숨겨진 차이점

본 글은 위챗 미니 프로그램에서 async/await 구문을 사용하는 방법에 대한 내용입니다(코드 예시). 도움이 필요한 친구들이 참고하시면 좋겠습니다.

WeChat 미니 프로그램 개발은 "페이지 렌더링"과 불가분의 관계입니다. 미니 프로그램의 "페이지 렌더링"이 무엇인지, 어떻게 사용하는지 초보자가 이해하기 어렵나요?
Vue를 배운 학생들에게는 이것이 더 친숙합니다. 실제로는 데이터 바인딩 페이지 렌더링입니다.
페이지 렌더링에서 가장 중요한 것은 목록 렌더링과 조건부 렌더링입니다. 먼저 몇 가지 간단한 예를 살펴보겠습니다.

다음은 "목록 렌더링"의 예입니다.

<view>
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

위의 예에서 볼 수 있듯이 기본 배열의 현재 항목의 첨자 변수 이름은 기본적으로 인덱스로 설정되고 현재 항목의 변수 이름은 배열 항목의 기본값은 항목입니다. 물론 wx:for-item을 사용하여 배열의 현재 요소에 대한 변수 이름을 지정할 수 있고, wx:for-index를 사용하여 배열의 현재 첨자의 변수 이름을 지정할 수 있습니다.

<view>
  {{idx}}: {{itemName.message}}
</view>

다음은 "조건부 렌더링"의 예입니다.

<view>True</view>

Page({
  data: {
    condition: true
  }
})

위 예는 조건이 true인 경우 페이지가 위의 보기 태그를 렌더링하는 것을 보여줍니다. 물론 wx:elif 및 wx:else를 사용하여 다음과 같이 else 블록을 추가할 수도 있습니다.

<view> 5}}">1</view>
<view> 2}}">2</view>
<view>3</view>

주제로 이동하여 기사 제목에 대한 질문을 살펴보겠습니다

1. 목록 렌더링에서 wx:key의 역할

사실 공식 문서를 처음 읽으시면 wx:key에 대해 조금 혼란스러우실 수도 있습니다. 공식적인 설명은 다음과 같습니다. 다년간의 문서 읽기 경험으로 인해 일반적으로 이해하지 못하는 중요하지 않은 텍스트는 무시하고 주의를 기울일 수 있으므로 위 그림의 텍스트 중 굵은 부분과 같은 핵심 사항은 wx를 작성하지 않기로 결정했습니다. :key 속성이 시작 부분에 있습니다. 그러나 개발 과정에서 (wx:key를 추가하지 않고) 너무 많은 목록 렌더링을 작성한 후에 콘솔은 많은 wx:key 경고를 보고할 것입니다. 저는 약간 코드 중독자이고 매우 불편해 보이지만 고통스럽기도 합니다. wx:key의 실제 역할을 모르기 때문에 다음과 유사하게 각 목록 렌더링 후에 wx:key="{{index}}"를 추가하는 솔루션을 만들었습니다. 경고가 전혀 표시되지 않는다는 사실에 놀랐습니다. 그래서 반년 넘게 사용했습니다.

그런데 제가 반년 전에 진행했던 프로젝트에서 사용자의 아바타와 닉네임을 얻으려고 시도하는 목록 렌더링이 있어서, 매번 얻은 사용자 정보가 일치하지 않았습니다. 현재 콘텐츠와 혼동이 발생할 수 있습니다. 그래서 wx:key를 다시 이해하게 되었고, 다음 예시와 결합하면 이해가 되는 것 같았습니다.

<view>
  {{item}}
</view>

<switch>
  {{item.id}}
</switch>

사실 wx:key는 현재 목록에 있는 항목의 특성을 바인딩하는 데 사용됩니다. 동적으로 업데이트되면 wx:key의 기능은 원본 프로젝트의 전체 상태를 변경하지 않고 유지하는 것입니다. 위의 예를 바탕으로 목록 배열이 객체 배열인 경우 wx:key 속성은 위의 wx:key="unique" 또는 wx와 같이 해당 고유 속성 이름을 직접 쓸 수 있음을 알 수 있습니다. key= "id"도 가능합니다. 속성이 고유한 값이면 페이지에서 고유한 페이지 태그의 id 속성과 유사합니다.

목록 배열이 기본 유형 배열인 경우 다음과 같이 wx:key="*this"를 직접 작성하세요.

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ]
  }
})

wx:key 속성을 능숙하게 사용하세요

목록 렌더링이 다음과 같은 것이 확실한 경우 그러면 제가 처음에 했던 것처럼 wx:key="{{index}}"

만 추가하면 됩니다. 반대로 동적 목록이라면 고유한 목록을 찾아야 합니다. key 값을 배열에 넣고 wx:key

• 물론 경고를 무시해도 함수에는 영향을 주지 않으니 추가하지 않아도 괜찮습니다

• 2. 란 무엇인가요? wx:if와 Hidden의 차이점
• 사실 우리는 숨겨진 대신 조건부 렌더링을 더 자주 사용합니다. wx:if는 확장이 가능하지만 후자는 특정 논리가 부족하기 때문입니다. 그러나 그들 사이의 차이점은 무엇입니까?

  공식 문서에는 다음과 같이 설명되어 있습니다.

위 그림에서 상태를 자주 전환해야 한다면 Hidden을 사용하고, 그렇지 않으면 wx:if를 사용한다는 것을 이해할 수 있을 것입니다.

즉, wx:if는 실시간으로 렌더링 구성 요소를 생성하거나 소멸할 수 있으며, 그것이 true일 때 생성됩니다. 처음에 false일 때는 아무 작업도 수행하지 않으며, true에서 false로 변경되면 소멸됩니다. . 따라서 자주 전환하는 것은 상대적으로 성능 집약적인 이동입니다. 숨김은 페이지가 처음 렌더링될 때 구성 요소가 페이지에 렌더링된다는 의미입니다. true 또는 false 값은 표시 및 숨기기만 제어합니다. 페이지가 삭제되지 않으면 구성 요소도 삭제되지 않습니다.
이를 이해하시면 개발자의 입장에서 이 두 가지 조건부 판단을 유연하게 사용하면 절반의 노력으로 두 배의 결과를 얻을 수 있다는 것을 알게 될 것입니다.

다음은 개발자가 참고할 수 있는 몇 가지 사용 시나리오입니다.

<view>加载中……</view>
<view>没有更多了</view>

上面代码是一个上拉加载动画显示与隐藏组件，可以看到用的是 hidden，因为他是一个需要频繁切换的组件。

<block>
  <view>
    <text>{{node.children[0].text}}</text>
  </view>
</block>
<block>
  <image></image>
</block>
<block>
  <video></video>
</block>

上面代码展示的是渲染文字还是图片或者是视频，只展示其中的一个那么用 wx:if 最佳。

下面是一个自定义 input 组件：

<view>
  <view>
    <input>
    <view>发送</view>
  </view>
</view>

其功能是点击评论按钮能实时显示输入框，否则隐藏。这里为什么用 wx:if 呢？因为我希望它显示时是新的 input 组件，不是之前渲染好的，这样如果我刚输入完文字，再次评论不会出现上一次的文字残留。

巧用 wx:if 和 hidden

• 有时我们需要提前渲染好里面的子组件，那么要用 hidden，否则待显示时需要加上渲染的时间

• 通常情况下，我在隐藏的时候都不需要该组件的话，那就用 wx:if

• 如果需要在页面中点击切换的渲染，那么考虑小程序性能问题，还是用 hidden 为好

三、思考（引伸）

1、 这个元素在列表和条件渲染上是很好用的，不过要注意不要在这个标签上绑定其他属性，比如 data- 或者绑定事件 bindtap。下面是一个反例：

<block>
  <view>view1</view>
  <view>view2</view>
</block>

上面的代码里，在 js 中定义绑定事件后，你会发现不会执行。原因就在 元素在渲染页面后并不会存在，他不是个组件，不会渲染在页面树节点里面，所以在他上面绑定的事件或者属性也不会有效。

2、 当 wx:for 的值为字符串时，会将字符串解析成字符串数组；另外，花括号和引号之间如果有空格，将最终被解析成为字符串，请看下面的例子：

<view>
  {{item}}
</view>

等同于

<view>
  {{item}}
</view>

<view>
  {{item}}
</view>

等同于

<view>
  {{item}}
</view>

本文参考：微信小程序开发基础教程 https://www.html.cn/study/20.html

위 내용은 목록 렌더링에서 wx:key의 역할과 조건부 렌더링 wx:if와 숨겨진 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!