目的：“^{:key item}”

Question

我正在阅读http://reagent-project.github.io/

那里的代码片段是：

(defn lister [items]
  [:ul
   (for [item items]
     ^{:key item} [:li "Item " item])])

^{:key item} 的含义是什么，我们为什么要它？[文档是指使 Reflect 更快。]

Answer 1

React 需要识别单个列表项，以便它可以判断哪些已更改。否则，React 在重新渲染时只能扔掉整个列表。因此，您需要添加一个密钥。

在反应（JSX）中：

<li key={item.whatever}>
  {item.bar}
</li>

在试剂中，您将密钥作为元数据添加到 Hiccup 表单中。然后，Reagent 负责为 React 设置密钥。

^{:key (.-whatever item)} [:li (.-bar item)]

您可以使用任何唯一标识列表元素内容的东西。在 ClojureScript/Reagent 中，您通常使用项目本身。