リストレンダリングにおけるwx:keyの役割と条件付きレンダリングwx:ifとhiddenの違い

この記事の内容は、WeChat アプレットでの async/await 構文の使用方法 (コード例) に関するものです。必要な方は参考にしていただければ幸いです。

WeChat ミニ プログラムの開発は「ページ レンダリング」と切り離せないのですが、初心者にとってミニ プログラムにおける「ページ レンダリング」とは何なのか、またその使い方を理解するのは難しいでしょうか。
vue を学習した学生にとっては、これは実際にはデータ バインディング ページのレンダリングの方が馴染みがあります。
ページ レンダリングで最も重要なのは、リスト レンダリングと条件付きレンダリングです。まず、いくつかの簡単な例を見てみましょう。

以下は「List rendering」の例です:

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

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

上記の例からわかるように、デフォルトの現在の項目の添え字変数名配列のデフォルトはインデックスであり、配列の現在の項目の変数名のデフォルトは item です。もちろん、次のように、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 を記述しません。ただし、開発プロセス中に (wx:key を追加せずに) リストのレンダリングを書きすぎると、コンソールに大量の wx:key 警告が報告されます。私はコードフリークで、これは非常に不快に思えますが、同時に苦しんでいます。 wx:key の本当の役割がわからないので、次のような各リストのレンダリング後に wx:key="{{index}}" を追加するという解決策を作成しました。 ＃それで、すべての警告が消え、他に悪影響がなかったことに驚いたので、半年以上このように使用していました。

しかし、半年前に取り組んだプロジェクトでは、ユーザーのアバターとニックネームを取得する必要があるリストレンダリングがあったため、以前の方法では機能せず、毎回取得したユーザー情報が一致していませんでした。現在の内容にすると混乱が生じます。そこで、wx:key について再理解しました。次の例と組み合わせると、理解できたように思えました。

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

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

実際、wx:key は、現在のリスト内の項目の特性をバインドするために使用されます。 , if リストは動的に更新されるため、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}}"

• を追加できます。

  逆に、それが動的リストの場合は、配列内で一意のキー値を見つけて、それを wx:key に入れる必要があります

• もちろん、警告は無視してください。関数には影響しません。追加しなくても大丈夫です。

• 2. wx:if と hidden

In の違いは何ですか。実際、条件付きレンダリングを使用するときは、ほとんどの場合、非表示ではなく wx:if を使用します。これは、前者は拡張可能ですが、後者には特定のロジックが欠けているためです。しかし、それらの違いは何でしょうか？

公式ドキュメントでは次のように説明されています:

上の図では、状態を頻繁に切り替える必要がある場合は hidden を使用し、それ以外の場合は wx を使用することが理解できると思います。 ：もし。

言い換えると、wx:if はリアルタイムでレンダリング コンポーネントを作成または破棄できます。これが true の場合は作成され、最初が false の場合は何も行わず、true から変更されると破棄されます。偽に。したがって、頻繁に切り替えることは、比較的パフォーマンスに負荷がかかります。また、hidden は、ページが最初にレンダリングされるときにコンポーネントがページ上にレンダリングされることを意味します。true または false の値は、コンポーネントの表示と非表示のみを制御します。ページが破壊されない場合、コンポーネントも破壊されません。 これを理解してください。開発者の視点から見ると、これら 2 つの条件判断を柔軟に使用すると、半分の労力で 2 倍の結果が得られることがわかります。

ここでは、開発者の参考となるいくつかの使用シナリオを示します:

<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とhiddenの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。