For

列表渲染组件，高效地渲染动态列表。

Props

interface ForProps<T> extends ListLifecycleHook {
  each: readonly T[]
  children: (item: T, index: Ref<number>) => RenderChild
  key?: keyof T | ((item: T) => any)
}

属性	类型	说明
`each`	`readonly T[]`	要遍历的数组
`children`	`(item: T, index: Ref<number>) => RenderChild`	渲染函数
`key`	`keyof T \| ((item: T) => any)`	可选的 key 指定

ListLifecycleHook

列表生命周期钩子，用于实现列表项的过渡动画。

属性	类型	说明
`onLeave`	`(view: View, done: () => void) => void`	列表项离开动画
`onEnter`	`(view: View) => void`	列表项进入动画
`onBeforeUpdate`	`(children: IterableIterator<View>) => void`	更新前回调
`onAfterUpdate`	`(children: IterableIterator<View>) => void`	更新后回调

示例

基本用法：

tsx

import { For, ref } from 'vitarx'

function App() {
  const items = ref(['a', 'b', 'c'])

  return (
    <For
      each={items}
      children={(item, index) => (
        <div key={item}>
          {index}: {item}
        </div>
      )}
    />
  )
}

指定 key：

tsx

<For each={users} key="id" children={(user) => <div>{user.name}</div>} />

参考：For 详解