Question

我正在寻找使用ES6 Map对象为我做哈希，而不是创建自定义哈希函数。但是，当我开始研究ES6 Map时，在我看来，它对不变性的支持并不多，这是响应和还原的关键。

我习惯于不使用任何库来实现不变性，而只是简单地 const newObj = {... prevObj，newKey：“值”} 或使用数组映射/过滤。

但是，如果我必须开始使用ES6 Map Objects，它具有直接更新对象本身的方法。

我能想到的就是做类似的事情。

var myMap = new Map（）然后再.. myNewMap = {... myMap.set（）} this.setState（{myMap：myNewMap}）

或类似的东西，但我不确定是否可以。

感谢您的帮助。

Answer 1

在该州内使用ES6的Map实际上非常容易。您需要使用ReactDOM和ReactDOM.render(document.getElementById('someid'), map.get("123"));。但是要使它在优化方面具有任何优势，则要复杂一些。而且它可能仅对某些应用有用。

为避免严格地说来抽象，让我们来看一个示例应用程序：DOM是HTML <table>，而ReactJS状态是坐标和值的Map。 <td>元素将具有坐标ID，例如id="pos-1,2"将是第一行第二列的位置。现在状态可能看起来像...

this.state = {
    'coordinates': Map({'1,2':'my 1/2 text!', '4,5':'my 4/5 text!'}),
};

要更新状态，您可以使用updateState() ...

updateState(newmap) {
    const coordinates = this.state.coordinates;
    newmap.keys().forEach((key) => {
        const parent = document.getElementById('pos' + key);
        const text = newmap.$key;
        ReactDOM.unmountComponentAtNode(parent);
        ReactDOM.render(parent, (<span>{text}</span>);
        coordinates.set(key, text);
    });
    this.state.setState({'coordinates':coordinates});
}

那么，这里发生了什么？我们可以随时在表网格上的任何位置更新状态。例如，如果我们已经有500个网格，其中包含文本，那么我可以再添加一个网格文本字段，并带有this.updateState(Map({'1000,500':'my text at position 1000x500!'}));。这样，Map()可以在状态和中使用，它保留了O（1）查找单个更改的优点，因为我们的{ {1}}处理。

这也绕开了updateState()的许多使用，但这是设计决定。我使用了一个1,000x1,000表格网格的示例，因为使用render()时拥有1,000 ^ 2个唯一的有状态元素会花费大量的负载/处理时间，在这种情况下，render()就可以正常工作很好。

将ES6 Map Object与React（和/或）redux结合使用

1 个答案: