The role of wx:key in list rendering and the difference between conditional rendering wx:if and hidden

The content of this article is about the method of using async/await syntax (code example) in WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

Developing WeChat mini programs is inseparable from "page rendering". It is difficult for beginners to understand what "page rendering" in mini programs is and how to use it?
For students who have learned vue, this is more familiar. It is actually data binding page rendering.
So the most important things about page rendering are list rendering and conditional rendering. Let’s take a look at a few simple examples first.

The following is an example of "List rendering":

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

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

As can be seen from the above example, the subscript variable name of the current item of the default array defaults to index, and the array The variable name of the current item defaults to item. Of course, you can use wx:for-item to specify the variable name of the current element of the array, and use wx:for-index to specify the variable name of the current subscript of the array, as follows:

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

The following is a "Conditional rendering" Example:

<view>True</view>

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

The above example shows that when condition is true, the page renders the above view tag. Of course, you can also use wx:elif and wx:else to add an else block, as follows:

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

Let’s go to the main topic and explore the questions about the article title

1. What is the role of wx:key in list rendering?

In fact, you may be a little confused about wx:key when you read the official documents for the first time. The official explanation is this:

According to my many years of experience in reading documents, I can generally ignore unimportant text that I can’t understand and just focus on the key points, such as the bold part of the text in the picture above. Therefore, I chose not to write wx at the beginning. :key this attribute. However, after writing too many list renderings (without adding wx:key) during the development process, the console will report a lot of wx:key warnings. I am a bit of a code addict, which seems very uncomfortable, but I also suffer from not knowing wx:key. The real role of key, so I created a solution, which is to add wx:key="{{index}}" after each list rendering, similar to the following:

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

So I was surprised I found that all the warnings were gone and there were no other negative effects, so I used it like this for more than half a year.
However, in a project I worked on half a year ago, there was a list rendering that needed to try to obtain the user's avatar and nickname, so my previous method did not work. The user information obtained each time did not correspond to the current content, and would Confusion occurs. So I re-understood wx:key, and combined with the following example, I seemed to understand:

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

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'},
    ]
  }
})

In fact, wx:key is used to bind the characteristics of the items in the current list, that is, if The list is dynamically updated, so the role of wx:key is to keep the entire state of the original project unchanged.
Combined with the above example, we can know that if the list array is an object array, then the wx:key attribute can directly write the corresponding unique attribute name, such as the above wx:key="unique", or wx: key="id" is also possible, as long as the attribute is a unique value, it is similar to the id attribute in the page tag that is unique on the page.
For the list array is a basic type array, then just write wx:key="*this" directly, as follows:

<block>
  <view>{{index}}:</view>
  <view>{{item}}</view>
</block>

Use the wx:key attribute skillfully

• If it is clear that your list rendering is a static list, then you can do what I did at the beginning and add wx:key="{{index}}"

• On the contrary, if it is a dynamic list, then you have to find the unique key value in the array and put it in wx:key

• Of course, if you ignore the warning, it will not affect the function. It’s okay if you don’t add it

2. What’s the difference between wx:if and hidden

In fact, when we use conditional rendering, we mostly use wx:if instead of hidden, because The former can be expanded, but the latter lacks certain logic. But what is the difference between them?
The official document describes it like this:

In the above picture, we can probably understand that if you need to switch states frequently, use hidden, otherwise use wx:if.
In other words, wx:if can create or destroy rendering components in real time, and it will be created when it is true. It will do nothing when it is initially false, and it will be destroyed when it changes from true to false. So switching it frequently is a relatively performance-intensive move. And hidden means that the component will be rendered on the page when the page is initially rendered. The true or false value only controls its display and hiding. If the page is not destroyed, the component will not be destroyed either.
Understand this, you will find that from the perspective of our developers, flexible use of these two conditional judgments will get twice the result with half the effort.
Here are several usage scenarios for developers’ reference:

<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

The above is the detailed content of The role of wx:key in list rendering and the difference between conditional rendering wx:if and hidden. For more information, please follow other related articles on the PHP Chinese website!