なぜReact propsをスプレッド演算子で渡すことができるのか？

通常、JSXでComponentにprops を渡す場合、下のように書ける。

const props = { hoge: 'aaa', fuga: 'bbb' }

<Component hoge={props.hoge} fuga={props.huga} />

スプレッド演算子を用いると、より簡潔に書き換えられます．

const props = {hoge: 'aaa', fuga: 'bbb' }
<Component {...props} />

僕は、スプレッド演算子の書き方でReact propsを渡せることに違和感がありました。そのため、なぜReact propsをスプレッド演算子で渡すことができるのか調査しました。

JSXとReact.createElementの関係

公式ドキュメントによれば、JSX とは、つまるところ React.createElement(component, props, ...children) の糖衣構文にすぎないそうです。 JSXで書いたコードは、React.createElementにコンパイルされます。

JSX

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>


React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

createElement()の第1引数は、タグ名の文字列（'div' や 'span' など）、React component 型（クラスもしくは関数）、React fragment 型のいずれか、第2引数は、各propsをまとめてObject化したもの第3引数は、タグの子要素が入ります

スプレッド構文利用パターンだと下のようになります。React.createElementへのコンパイルをイメージすればなぜreact propsをスプレッド演算子で渡すことができるのか理解できました。

JSX

<MyButton {...props}>
  Click Me
</MyButton>


React.createElement(
  MyButton,
  {..props},
  'Click Me'
)

参考：