避免将 JS Map 与 Immutable Map 一起使用

Question

如何避免原生Map与Immutable.Map混淆？

我在一个 React 项目中使用 immutable.js（ES6 或更高版本，用 babel 编译）。所以很多文件都以这样的导入开头：

import { Map } from 'immutable';

一切都很好，直到有人将上述导入添加到使用 native JS Map 的文件中，这样 new Map() 就变成了 Immutable.Map.

我因此可以导入整个不可变库 (import Immutable from 'immutable';) 并使用 Immutable.Map 引用它。但是，这可能会影响生成代码的大小（编译器可能无法确定没有使用整个导入的库）并且可能看起来不太好。

有更好的解决方案吗？我可以以某种方式具体引用原生 JS 地图吗？

Answer 1

这里有两种选择。我喜欢第一个，但是YMMV。

原生 JavaScript 模块不仅可以为整个库导入添加别名，还可以为 individual named imports: import {Map as IMap} from 'immutable'; 添加别名。现在没有冲突，您的包大小应该更小。额外的好处：你的代码的意图对于未来的维护者来说可能会变得更加清晰，他们现在会立即知道他们不是在处理普通的本地地图。
实际构造函数是全局上下文的属性：仅引用window.Map，不会与您导入模块命名空间的构造函数发生冲突。

Answer 2

我建议在您的高阶组件中导入 Map 并将其作为 prop 传递给您的组件，或者使用 import alias（如@Jared Smiths 的回答中所建议）

HigherOrderComponent

import { Map } from 'immutable';


class HigherOrderComponent extends React.Component { 
    render() {
        return <myChildComponent map={Map} />;
    }
}

我的子组件

class HigherOrderComponent extends React.Component { 
    componentDidMount () {
        this.myMap = new this.props.Map();
    }
    render() {
       // ...
    }
}

避免将 JS Map 与 Immutable Map 一起使用

Avoid usage of JS Map with Immutable Map

javascript

ecmascript-6

immutable.js