javascript - RiotJS : How to cache values during loops?

Question

我希望通过在 RiotJS 中的 each={} 循环期间缓存重复值来提高性能和可读性。有没有办法做到这一点，不会渲染该值和/或产生不必要的性能开销？

之前:

<my-tag>
  <p each="{item in data}">
    <b if="{item.style == 'b'}">{item.text}</b>
    <i if="{item.style == 'i'}">{item.text}</i>
  </p>
  data = [
    {"text": "bold me", "style": "b"},
    {"text": "italicize me", "style": "i"}
  ];
</my-tag>

<!-- Renders <p><b>bold me</b></p> <p><i>italicize me</i></p> -->

之后:

<my-tag>
  <p each="{item in data}">
    {style=item.style}
    {text=item.text}
    <b if="{style == 'b'}">{text}</b>
    <i if="{style == 'i'}">{text}</i>
  </p>
  data = [
    {"text": "bold me", "style": "b"},
    {"text": "italicize me", "style": "i"}
  ];
</my-tag>

<!-- Renders <p>b bold me <b>bold me</b></p> <p>i italicize me <i>italicize me</i></p> -->

jsfiddle

Answer 1

我想你想这样做:

<p each="{data}">
  <b if="{style == 'b'}">{text}</b>
  <i if="{style == 'i'}">{text}</i>
</p>

jsfiddle