在 jsx 中使用 flatMap 而不是 map 有什么好处吗？

【问题标题】：Is there any benefits using flatMap over map in jsx?在 jsx 中使用 flatMap 而不是 map 有什么好处吗？
【发布时间】：2020-12-22 16:44:21
【问题描述】：

例如：

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

我们能保证输出是普通数组吗？

我们可以在 Big-O 中减少嵌套深度或简化吗？

【问题讨论】：

标签： javascript reactjs dictionary big-o flatmap

【解决方案1】：

flatMap只有在其回调的返回值返回一个数组时才有用：

docs

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

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

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

因此，在这种特殊情况下，flatMap 对map 没有任何好处

【讨论】：