It's actually very easy to use ES6's Map
within the state. You need to use ReactDOM
and ReactDOM.render(document.getElementById('someid'), map.get("123"));
. But for this to have any advantageous benefits in terms of optimization, it's a bit more complicated. And it might only be useful for certain applications.
To avoid speaking strictly in the abstract, let's take a sample application: the DOM is an HTML <table>
and the ReactJS state is a Map
of coordinates and values. The <td>
elements would have coordinate IDs, like id="pos-1,2"
would be the position of the 1st row, the second column. Now the state could be looking like...
this.state = {
'coordinates': Map({'1,2':'my 1/2 text!', '4,5':'my 4/5 text!'}),
};
To update state, you could have 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});
}
So, what is happening in here? We could update the state, whenever we want, with any position on the table grid. For instance, if we had 500 grids already with text in them, I could add just one more grid text field, with this.updateState(Map({'1000,500':'my text at position 1000x500!'}));
. In this way, the Map()
can be used within the state and it retains its benefit of an O(1) lookup for a single change, because our updateState()
handles it.
This also bypasses much of the use of render()
, but that is a design decision. I used the example of a 1,000x1,000 table grid, because having 1,000^2 unique, stateful elements has a tremendous load/handling time when using render()
, and in that case, Map()
would work just fine.