Question

如何避免将本机Map与Immutable.Map混淆？

我在React项目（ES6或更高版本，通过babel转译）中使用immutable.js。因此，许多文件都以导入开头，例如：

import { Map } from 'immutable';

一切正常，直到有人将上述导入添加到使用native JS Map的文件中，这样new Map()才成为Immutable.Map。

因此，我可以导入整个不可变库（import Immutable from 'immutable';）并使用Immutable.Map对其进行引用。但是，这可能会影响最终代码的大小（编译器可能无法确定未使用整个导入的lib），并且看起来可能不太好。

有更好的解决方案吗？我可以以某种方式专门引用本机JS Map吗？

Answer 1

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

本机JavaScript模块不仅允许您为整个库导入起别名，还可以为individual named imports：import {Map as IMap} from 'immutable';起别名。现在没有冲突，您的捆绑包尺寸应该更小。额外的好处：将来的维护人员现在可以立即知道他们没有在使用普通的本机Maps。
实际的构造函数是全局上下文的一个属性：仅引用window.Map，它不会与您导入到模块名称空间中的那个冲突。

Answer 2

我建议您将Map导入到您更高阶的组件中，然后将其作为道具传递给您的组件，或者使用import alias（如@Jared Smiths答案中所建议）

HigherOrderComponent

import { Map } from 'immutable';


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

myChildComponent

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

避免将JS地图与不可变地图一起使用

2 个答案: