关于 React tabs 组件 API 设计的问题？

Question

最近使用 rc tabs 组件的时候发现新版本对组件进行了重新设计。v12 之前是将 tabPanel 子组件作为 children prop 传递给 tabs 组件，而 v12 开始则是直接将 items 传递给 tabs。Antd 也同理，采用了传递 items 的方式，并且会在后续新版本中抛弃旧的写法。
于是有个疑问，新的传递 prop 的方式相比以前有什么优点吗？或者以前的方式有什么缺点？

// 以前的写法
const App = () => (
  <Tabs defaultActiveKey="1">
    <Tabs.TabPane tab="Tab 1" key="1">
      Content of Tab Pane 1
    </Tabs.TabPane>
    <Tabs.TabPane tab="Tab 2" key="2">
      Content of Tab Pane 2
    </Tabs.TabPane>
    <Tabs.TabPane tab="Tab 3" key="3">
      Content of Tab Pane 3
    </Tabs.TabPane>
  </Tabs>
)

// 现在的写法
const App = () => (
  <Tabs
    items={[
      {
        label: `Tab 1`,
        key: '1',
        children: `Content of Tab Pane 1`,
      },
      {
        label: `Tab 2`,
        key: '2',
        children: `Content of Tab Pane 2`,
      },
      {
        label: `Tab 3`,
        key: '3',
        children: `Content of Tab Pane 3`,
      },
    ]}
  />
);

Answer 1

主要是性能问题。rc-tabs的源码里，老版本需要将children转成数组，然后再map，再filter，并且没有进行缓存优化。

换成items直接接受数组后, 省去了转化数组和map的过程，只会filter。并且使用了useMemo进行优化。

Answer 2

看官方的解释是说

有更好的性能和更方便的数据组织方式

个人觉得使用层面上差距并不大，本质上都是 render props

const items = [
  { label: '项目 1', key: 'item-1', children: '内容 1' }, // 务必填写 key
  { label: '项目 2', key: 'item-2', children: '内容 2' },
];

// old
<Tabs>{
  items.map(({ key, label, children }) => (
    <Tabs.TabPane tab={label} key={key}>{children}</Tabs.TabPane>
  ))
}</Tabs>;

// new
return <Tabs items={items} />;

• 所谓更方便的数据组织方式，对比新旧的写法，其实就是向上抽象了一层，完全转变为了配置的形式，不需要开发者都去 map 一次了
• 至于更好的性能，我能想到的就是 items 的方式有利于底层基于 useMemo 做一些缓存，而 children prop 的方式做不了，需要开发者去做