JSXのスプレッド属性
もし、事前にコンポーネントに配置したいプロパティが全て分かっているのであれば、JSXで簡単に割り当てる事が出来ます。
var component = <Component foo={x} bar={y} />;
propsの変更は悪である。
もし設定したいプロパティが事前に分からない場合、 後からオブジェクトに追加したくなるかもしれません。
var component = <Component />;
component.props.foo = x; // BAD
component.props.bar = y; // こちらもBAD
これは代入されるまで右辺のプロパティの型が正しいものであるかをチェックする手助けが出来ないため、アンチパターンです。 これは、プロパティの型エラーが不可解なスタックトレースで終了してしまう事を意味します。
propsはこの時点で、不変であると考えられるべきです。 いずれかの場所でpropsオブジェクトを変更することは、予期せぬ処理を引き起こす可能性があるため、 理想を言えばこの時点でオブジェクトは凍結されるべきです。
スプレッド属性
ここで、Spread Attributes(スプレッド属性)と呼ばれるJSXの新しい機能を使用してみましょう。
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
渡されたオブジェクトのプロパティは、コンポーネントのpropsにコピーされます。
これは複数回使用したり、別の属性と結合したりして使用することが可能です。 順序の指定は重要です。 後の属性が、前の属性を上書きします。
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
この奇妙な「...」の記法は何でしょうか？
この...演算子(または、スプレッド演算子(spread operator))は、
ES6の配列で既にサポートされています。
また、Object RestとSpread PropertiesのためのES7提案も存在します。
我々はJSXでより洗練された文法を提供するために、これらサポートと開発基準を取り入れています。