相比于jsx中的地图，使用flatMap有什么好处吗？

问题描述

例如：

const Foo = ({ items }) => (
  <>
    {items?.flatMap(({ foo,bar }) => (
      <>
        <div>{foo}</div>
        <div>{bar}</div>
      </>
    )}
  </>
)

我们可以保证输出的内容是纯数组吗？

我们可以减少嵌套深度还是简化Big-O？

解决方法

flatMap仅在其回调的返回值返回数组时有用：

docs

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","in","","California"]

在这种特殊情况下，当映射到JSX时，回调的返回值将永远不会是数组，因为React限制您只有1个根节点。

因此，在这种情况下，flatMap不会比map受益