Skip to content

组件<Space>提供可选的自定义key,优化列表渲染性能 #33331

@qin20

Description

@qin20
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

列表使用key是react中常用的性能优化手段,但目前<Space>组件的Item默认使用了index来做key,导致列表过大的时候,渲染性能达不到预期。建议Space组件首先使用类似child.props.spaceItemKey的值来做item的key,如果child没有传这个值,再默认使用index来做key

What does the proposed API look like?

// 建议space.item实现如下
<Item
        className={itemClassName}
        key={child.props.spaceItemKey || `${itemClassName}-${i}`}  // 这行有修改
        direction={direction}
        index={i}
        marginDirection={marginDirection}
        split={split}
        wrap={wrap}
>
        {child}
</Item>
// 使用场景举例
<Space>
{
    aBigList.map((item) => <a spaceItemKey={item.key} />)
}
</Space>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions