列表渲染
编辑此页面列表渲染用于渲染数据集合(例如数组或对象)。
Solid 提供了两种渲染列表的方式:<For>
和<Index>
组件。这两个组件都可以遍历数据集合生成元素,但它们适合不同的场景。
<For>
<For>
是一个循环组件,允许您根据数组或对象的内容渲染元素。该组件被设计用于复杂的数据结构,例如对象数组,其中列表的顺序和长度可能会频繁更改。
<For>
的唯一属性是 each
,用于指定要循环的数据集合。此属性需要一个数组,如果使用对象,需要先通过 Object.entries 或 Object.values 等方法转换为数组。
import { For } from "solid-js"
<For each={data()}> {(item, index) => // 每个元素的渲染逻辑 }</For>
在 <For>
标签之间,组件需要一个回调函数,该函数将指定如何渲染数据集合中的每个条目。此结构类似于 JavaScript 的 map 方法中使用的回调。
该函数接收两个参数:
item
: 表示正在渲染的数据集合中的当前条目。index
: 表示当前条目的索引。
您可以访问当前的 item
和 index
来动态设置 JSX 元素的属性或内容。 index
是一个信号,必须作为函数调用才能获取其值。
<For each={data()}> {(item, index) => ( <li style={{ color: index() % 2 === 0 ? "red" : "blue", }} > {item.name} </li> )}</For>
Index
<Index>
与 <For>
类似,也是一个循环组件,允许您根据数组或对象的内容渲染元素。但是,当列表的顺序和长度保持稳定,但内容可能频繁更改时,<Index>
是更好的选择,因为它会减少重新渲染的次数。
import { Index } from "solid-js"
<Index each={data()}> {(item, index) => ( // 每个元素的渲染逻辑 )}</Index>
与 <For>
组件类似, <Index>
接受名为 each
的单个属性,用于指定要循环遍历的结构。
在 <For>
中,index
是一个信号,但在 <Index>
中是固定的。这是因为 <Index>
更关心带有索引的元素,因此,item
是一个信号,允许每个索引的内容更改而无需重新渲染,同时索引保持固定。
import { Index } from "solid-js";
<Index each={data()}> {(item, index) => ( <li> {item().name} - {item().completed} </li> )}</Index>;
<Index>
vs <For>
<For>
用于列表的顺序和长度可能频繁变化的情况。当 <For>
中的列表值发生变化时,整个列表将重新渲染。但是,如果数组发生更改,例如元素移动位置,<For>
将通过简单地移动相应的 DOM 节点并更新索引来管理这种情况。
<Index>
用于当列表的顺序和长度保持稳定,但内容可能频繁变化时。当 <Index>
中的列表值发生变化时,仅更新指定索引处的内容。
When to use <For>
在不需要信号、嵌套循环或动态列表的情况下,<For>
是最佳选择。例如,在创建静态元素列表(例如链接列表)时,<For>
是最好的选择。这是因为它只会修改列表中元素的索引,而不会重新渲染整个列表。
import { createSignal, For } from "solid-js";
function StringList() { const [items, setItems] = createSignal(["Item 1", "Item 2", "Item 3"]);
return ( <ul> <input type="text" onInput={(e) => { // 向列表添加新的条目 }} /> <For each={items()}> {(item, index) => ( <li> {item} - {index()} </li> )} </For> </ul> );}
如果您正在使用信号、JavaScript 原始值(例如字符串和数字)或输入字段,<Index>
是更好的选择。如果您使用 <For>
,则当值更改时,即使列表的长度保持不变,整个列表也会重新渲染。而 <Index>
将更新指定索引处的内容,列表的其余部分保持不变。
import { createSignal, Index } from "solid-js";
function FormList() { const [inputs, setInputs] = createSignal(["input1", "input2", "input3"]); return ( <form> <Index each={inputs()}> {(input, index) => ( <input type="text" value={input()} onInput={(e) => { // 更新 input 值 }} /> )} </Index> </form> );}