javascript - 如何有效地将 Immutable.js 映射列表转换为纯 js 对象数组以在 React 组件中使用？

Question

考虑以下代码:

import { fromJS } from "immutable"

const initialState = fromJS({
    radiusFilters: [
        { label: "1mi", value: 1 },
        { label: "2mi", value: 2 },
        ...
     ],
     locationOptionFilters: [
        { label: "State", value: "STATE" },
        { label: "City", value: "CITY" },
        ...
      ]
 }

第三方库，react-select ，坚持认为 Select 元素的 props 作为对象数组传入，因此对我来说，在某个时候将上述结构转换为其纯 JavaScript 等效项是有意义的。这些将是大型结构，我希望在使用 react-redux 时自动运行浅层检查。使用功能组件尽快运行(因此我坚持使用 Immutable )。

使用以下选择器是否会产生任何昂贵的影响？

const radiusFilterSelector = (state) => state.searchFilters.get("radiusFilters")

export const getRadiusFilters = createSelector([ radiusFilterSelector ], 
    radiusFilters => {
        return radiusFilters.toJS()
     }
)

在 mapStateToProps在我的 React 容器的函数中，我将调用必要的选择器(它看起来与上面的非常相似)来填充传递给组件的 props。

Answer 1

使用 fromJS() 会降低性能和toJS() .

如果您只对浅层比较感兴趣，您可以使用 Map() 设置初始状态而不是fromJS()并使用toArray()而不是toJS()当您需要将其转换回以供库使用时。

但是，在您知道性能导致瓶颈之前，我不会担心性能。请参阅When is optimisation premature?