React Component Props的解构ImmutableJS映射

我们有一个使用React + Redux + ImmutableJS的项目。我们的一位工程师最近增加了一个辅助方法来支持它传递时，一个组件作为道具解构的ImmutableJS地图：React Component Props的解构ImmutableJS映射

export function toObjectShallow(mapping: Map) { 
    const result = {}; 
    mapping.map((value, key) => { 
     result[key] = value; 
    }); 
    return result; 
}

因此，我们仍然可以做以下和避免重复调用是详细到Map.get：

<XyzComponent {...toObjectShallow(this.props.xyz)}/>

是的，这实质上是使原始对象的两个浅拷贝（我们的方法+解构）。这应该是最低的费用。我想知道，因为我没有在React/Redux/Immutable社区的其他地方看到这样的推荐，还有什么我错过了会使这种不理想的吗？

传递的属性仍然是原始的，不可改变的道具。它只是包含的对象被突变，这并不重要，因为它不会传递给组件。那么，是什么给了？这似乎是这样一个简单的解决方案，同时避免toJS()。为什么不在任何地方提及？

来源

2017-12-27 James

对我有很大争议的问题，以及你可以在这里查看的一些原因：https://esdiscuss.org/topic/extensible-destructuring-proposal 从我的角度来看，没有理由这样做，因为你可以通过映射到更智能的组件，并且仍然可以获得不可改变的优势，但使用您的方法，您仍然会改变容器。所以你可以更新或重新构建你的REDX端来获得一个干净的状态，而不需要传播Immutable。 –

我认为我正在寻找的“正确”答案是继续使用Immutable JS的toObject()，它将Immutable Map对象浅转换为常规对象，从而允许我们继续使用语法糖，同时保持属性不可变而不必使用我们自己的浅拷贝。

来源

2018-01-02 13:11:07 James

我遵循redux文档中的建议，对所有连接的组件使用HOC，以允许我与redux之外的纯JavaScript对象进行交互。所以，我选择和减速器仍然使用ImmutableJS对象，但其余代码使用普通的JavaScript对象：

https://redux.js.org/docs/recipes/UsingImmutableJS.html#use-a-higher-order-component-to-convert-your-smart-components-immutablejs-props-to-your-dumb-components-javascript-props

编辑 - 不知道这是你在上面提toJS，我曾以为你的意思ImmutableJS .toJS。

就偏好而言，使用HOC只需要每个组件执行一次，而不是每次在方法中使用组件。

来源

2017-12-27 15:37:13 brub

其实@詹姆斯问为什么这个解构不可变是不是一个普遍的范例，但道具传播不Immutable是。 –

是不是你只在连接组件上做过一次的区别，而是你将道具传递给连接组件的每一个组件？ – brub

不，我认为你只做一次过渡到非固定的道具，每隔一次你通过道具你会通过一个Imm.js对象。例如，用户容器列表将获得具有userid：info的地图，然后UserCard将获得用户道具等的地图，直到最后的化身将获得非不可变的Map.get（'avatar_url'），例如 –

React Component Props的解构ImmutableJS映射

回答

相关问题