thomasboyt / react

React is a JavaScript library for building user interfaces. It's declarative, efficient, and extremely flexible. What's more, it works with the libraries and frameworks that you already know.
http://facebook.github.io/react/
Other
0 stars 1 forks source link

Experiment: try letting CompositeComponent have an array of _renderedComponents #10

Open thomasboyt opened 9 years ago

thomasboyt commented 9 years ago

I'm concerned that the whole ReactDOMFragment idea was bad from the start, given the trouble I've had figuring out how to store and update the state of nodeCounts/Indexes. This won't solve #7, of course, but would at least make it easier to make a simple "child -> parent" lookup without going through the mess that is ReactDOMFragment...

The main difficulty here would then be turning

<Component>
  <frag>
    <li>foo</li>
    <li>bar</li>
  </frag>
</Component>

into:

<Component>
  <li>foo</li>
  <li>bar</li>
</Component>

I wonder if making frag turn into an array under the hood would be the best way to do it...

Oh, and I guess this would mean CompositeComponent now also has to be a ReactMultiChild-using component. That could be... interesting...

thomasboyt commented 9 years ago

hm, so here's an issue with this plan. the following:

<Component>
  <frag>
    {[<li>foo</li>,
      <li>baz</li>]}
    <li>bar</li>
  </frag>
</Component>

becomes:

<Component>
  {[<li>foo</li>,
    <li>baz</li>]}
  <li>bar</li>
</Component>

and while it may be possible to allow components to render multiple root components, expanding arrays into multiple root components seems potentially more complicated to maintain.

thomasboyt commented 9 years ago

If fragments are flattened into children, the way root nodes work will need to be overhauled to support multiple nodes. Right now this:

<Component>
  <frag>
    <li>foo</li>
  </frag>
  <frag>
    <li>bar</li>
  </frag>
  <li>baz</li>
</Component>

ends up as:

<Component id=".0">
  <li id=".0.0">foo</li>
  <li id=".0.0">bar</li>
  <li id=".0.2">baz</li>
</Component>

when it should be something to the effect of:

<Component id=".0:0">
  <li id=".0:0.0:0">foo</li>
  <li id=".0:0.0:1">bar</li>
  <li id=".0:0.1:0">bar</li>
</Component>

where 0:0 means composite_id:node. might be possible to shorten x:0 to just x for readability, too...

thomasboyt commented 9 years ago

I think that, because of how SEPARATOR is implemented in ReactInstanceHandles, changing this format actually isn't all that bad - a key that says 0.0:0.0 should be able to be handled by any code that was able to handle 0.0. The only thing that needs to change is the actual generation of the keys, which I believe happens in flattenChildren (through traverseAllChildren).

thomasboyt commented 9 years ago

huh, fun fact: : is already used a subseparator for arrays. I feel like this should be able to use the same separator for fragments, but have to think over it for a bit...

thomasboyt commented 9 years ago

current major issue here is that reconciliation isn't easy. it'd require either:

a) basically reimplementing ReactMultiChild in ReactCompositeComponent, or b) mixing in ReactMultiChild to ReactCompositeComponent (which is likely the better option), which will require some reshuffling to prevent circular dependencies