React: Why don't convert the third and later arguments of React.createElement to an array when use babel

[NE-SmallTown]

Same as #5403 of babel.The member of babel doesn't know too much about this.So I want to know your thoughts about this.Thanks.

[monkindey]

The official doc below

React.createElement(
  type,
  [props],
  [...children]
)

the [] maybe just mean this argument is optional, not the type. You can see the second argument, [props] is as same as the third. But props is the Object.

[NE-SmallTown]

@monkindey I know your mean,at API doc we usually do this.But my point is that if the babel converts them to an array instead append argument,it would be better,we can avoid the step of create an array and copy the elements into it,I mark the step by using red rectangle in the link above,you can check it.

[monkindey]

Sorry for the misunderstanding.

https://github.com/facebook/react/issues/2351 Maybe it helps?

[NE-SmallTown]

Hello?

[beautifullybroken1520]

Hello

On Mar 7, 2017 at 7:22 PM, [e-mail]> wrote:

Hello?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/9099#issuecomment-284915924, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AY3fSZpu_uAoAHrU2-Udpo9O1nmWO7D7ks5rjgLbgaJpZM4MRv7j
.

[gaearon]

This lets us differentiate between multiple children explicitly written in JSX:

<div>
  <ChildA />
  <ChildB />
</div>

vs multiple children passed as an array:

<div>
  {items.map(item => <Child item={item} />)}
</div>

The distinction is useful because we silently infer key values from index in the first case (since we know the user wrote that statically), but emit a warning for missing keys in the second case (since it's likely generated from dynamic data).

This is not a perfect heuristic but it works very well in our experience.
Hope it helps!

[NE-SmallTown]

@gaearon Thanks for your explaination.So you mean that if babel convert the syntax to:

React.createElement(
  "div",
   null,
   [<ChildA />, <ChildB />]
);

It will trigger the warning of "key"s because react can't automatically assign key to every element of the array because react will treat all arrays as dynamic data just like we use array.map(...),it can't differentiate them even though we wrote them statically like above?

If I am wrong,please let me know.Thanks.

[gaearon]

Yes.

[monkindey]

TIL, Thanks @gaearon

The related code I have found ReactElementValidator.js#L144-L150