JSX 展開屬性

如果你事先知道組件需要的全部 Props（屬性），JSX 很容易地這樣寫：

  var component = <Component foo={x} bar={y} />;

修改 Props 是不好的，明白嗎

如果你不知道要設(shè)置哪些 Props，那么現(xiàn)在最好不要設(shè)置它：

  var component = <Component />;
  component.props.foo = x; // 不好
  component.props.bar = y; // 同樣不好

這樣是反模式，因?yàn)?React 不能幫你檢查屬性類型（propTypes）。這樣即使你的 屬性類型有錯(cuò)誤也不能得到清晰的錯(cuò)誤提示。

Props 應(yīng)該被當(dāng)作禁止修改的。修改 props 對象可能會導(dǎo)致預(yù)料之外的結(jié)果，所以最好不要去修改 props 對象。

展開屬性（Spread Attributes）

現(xiàn)在你可以使用 JSX 的新特性 - 展開屬性：

  var props = {};
  props.foo = x;
  props.bar = y;  var component = <Component {...props} />;

傳入對象的屬性會被復(fù)制到組件內(nèi)。

它能被多次使用，也可以和其它屬性一起用。注意順序很重要，后面的會覆蓋掉前面的。

  var props = { foo: 'default' };  var component = <Component {...props} foo={'override'} />;  console.log(component.props.foo); // 'override'

這個(gè)奇怪的 ... 標(biāo)記是什么？

這個(gè) ... 操作符（增強(qiáng)的操作符）已經(jīng)被 ES6 數(shù)組 支持。相關(guān)的還有 ES7 規(guī)范草案中的 Object 剩余和展開屬性（Rest and Spread Properties）。我們利用了這些還在制定中標(biāo)準(zhǔn)中已經(jīng)被支持的特性來使 JSX 擁有更優(yōu)雅的語法。