Repository navigation
Accept iterables and collections as children. #2296
Description
React currently accepts Arrays as children:
var array = [<span />, <span />, <span />];
<div>{spans}</div>
It would be excellent if we can generalize this concept to accept both collections and iterables.
Collections (such as Set, Map, or Immutable-js's variants) can be identified if they implement values() and the result of calling values() is an Iterator (typeof maybeIterator.next === 'function').
Iterables (Array, arguments object, other array-ish things, third-party data structures) can be identified if they have Symbol.iterator or @@iterator returning an Iterator.
In both cases, you're left with an Iterator, at which point extracting the children becomes straight-forward.
This unlocks a few really useful things:
Use Immutable-js with React efficiently:
var data = Immutable.Vector('a', 'b', 'c');
<div>{data.map(str => <span>{str.toUpperCase}</span>)}</div>
Use generators:
var data = function*() {
yield <span />;
yield <span />;
yield <span />;
}
<div>{data}</div>
Reacted by Mark Penner
Activity
leebyron commentedon Oct 6, 2014
cc @sebmarkbage
sebmarkbage commentedon Oct 6, 2014
I'm not sure about the Collections duck typing. Set also have
@@iteratorso that should be enough.Maps are special in that we'd probably want to use the key as the React key value. So we could either detect maps specifically, or just allow any iterable with a sequence of two value tuples. The difficult part is, how do you determine if the tuple is a nested array value or Map tuple?
leebyron commentedon Oct 6, 2014
Maybe Iterable is enough then.
Map iterators return tuples while Set and Array iterators return individual values. Perhaps we can hold this convention and treat tuple[0] as React key.
leebyron commentedon Oct 6, 2014
The drawback with that is nested iterables/arrays. Explicitly looking for a method spec'd for Collections (
entriesif we also want to see keys) would differentiate the casessyranide commentedon Oct 7, 2014
Perhaps I misunderstood the discussion, but it seems to me that you must explicitly test for
MapvsSet, etc. ASetcontaining tuples should not be interpreted as key/value, as it's not unthinkable that you would want store lists of children in aSet.PS. IE11 collections does not have
iterator,@@iteratornorvalues, etc.leebyron commentedon Oct 21, 2014
#2376 implements this.
IE11 collections are a mess. I think the right strategy is to intelligently check for a native ES6 Map/Set implementation and polyfill over them if they are non-compliant. This is the approach we're taking at Facebook.
syranide commentedon Oct 23, 2014
@leebyron Sounds sane, "we" could even polyfill Array to be a cheap iterable very easily as well. As for IE11, I believe I showed you my earlier work on back-porting Map and Set (and an approximate WeakMap and WeakSet as well) to all legacy browsers which actually perform rather well (both perf and memory). Those could easily be made smart enough to use IE11 Map/Set as the underlying data structure and just provide the additional data required for fast ordered iteration.
graue commentedon Nov 14, 2014
@leebyron Should this be closed now that #2376 is merged?
leebyron commentedon Nov 14, 2014
Yep, thanks for the reminder :)
InferReactivePlaces understands setState type