反应性能

带离子组分的环betway东盟体育app

使用带离子组件的循环时，我们建议使用Reacbetway东盟体育appt's钥匙 属性。这允许通过仅更新组件内的内容而不是完全重新创建组件，以有效的方式对重新渲染循环元素进行反应。

通过使用钥匙 您可以为每个循环元素提供稳定的标识，因此React可以跟踪迭代器中的插入和删除。以下是如何使用的示例钥匙 ：

mycomponent.tsx.


              进口
             反应
              那
             
              {
             useestate.
              }
             
              从
             
              '反应'
              ;
             
              进口
             
              {
             离子联系
              那
             IonItem.
              那
             Ionlabel.
              那
             离子页面
              }
             
              从
             
              '@betway东盟体育app离子/反应'
              ;
             
              出口
             
              Const.
             我是我的
              ：
             反应
              。
              FC.
             
              =
             
              （
              的）
             
              =>
             
              {
             
              Const.
             
              [
             项目
              那
             SETITEMS.
              ]
             
              =
             
              useestate.
              （
              [
              {
             ID
              ：
             
              0.
              那
             价值
              ：
             
              '项目0'
             
              }
              那
             
              {
             ID
              ：
             
              1
              那
             价值
              ：
             
              '第1件'
             
              }
              那
             
              ......
              ]
              的）
              ;
             
              返回
             
              （
             
              <
             离子页面
              >
             
              <
             离子联系
              >
             
              {
             项目
              。
              地图
              （
              物品
             
              =>
             
              {
             
              返回
             
              （
             
              <
             IONITEM钥匙
              =
              {
             物品
              。
             ID
              }
              >
             
              <
             Ionlabel.
              >
              {
             物品
              。
             价值
              }
              <
              /
             Ionlabel.
              >
             
              <
              /
             IonItem.
              >
             
              的）
             
              }
              的）
              }
             
              <
              /
             离子联系
              >
             
              <
              /
             离子页面
              >
             
              的）
             
              }

复制复制

在此示例中，我们有一系列调用的对象项目 。每个对象都包含一个价值 和ID 。使用钥匙 属性，我们通过item.id. 对于每个对象。这ID 用于为每个环元件提供稳定的标识。

有关如何使用渲染列表的更多信息钥匙 看： https://reacctjs.org/docs/lists-and-keys.html.