リストレンダリングにおけるwx:keyの役割と条件付きレンダリングwx:ifとhiddenの違い-ミニプログラム開発-php.cn

この記事の内容は、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:keyの役割と条件付きレンダリングwx:ifとhiddenの違い私の長年の文書読みの経験によれば、理解できない重要でないテキストは通常無視できます。したがって、上の図のテキストの太字部分など、重要な点に注目してください。そのため、この属性の先頭には 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

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

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

言い換えると、wx:if はリアルタイムでレンダリングコンポーネントを作成または破棄できます。これが true の場合は作成され、最初が false の場合は何も行わず、true から変更されると破棄されます。偽に。したがって、頻繁に切り替えることは、比較的パフォーマンスに負荷がかかります。また、hidden は、ページが最初にレンダリングされるときにコンポーネントがページ上にレンダリングされることを意味します。true または false の値は、コンポーネントの表示と非表示のみを制御します。ページが破壊されない場合、コンポーネントも破壊されません。リストレンダリングにおけるwx:keyの役割と条件付きレンダリングwx:ifとhiddenの違いこれを理解してください。開発者の視点から見ると、これら 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 サイトの他の関連記事を参照してください。