React 之props屬性

react 裡有一個非常常用的模式就是對元件做一層抽象。元件對外公開一個簡單的屬性（props）來實作功能，但内部細節可能有非常複雜的實作。

如果不使用 jsx，可以使用一些對象輔助方法如 es6 的 <code>object.assign</code> 或 underscore <code>_.extend</code>。

下面的教程介紹一些最佳實踐。使用了 jsx 和 es7 的還在試驗階段的特性。

大部分情況下你應該顯式地向下傳遞 props。這樣可以確定隻公開你認為是安全的内部 api 的子集。

但 <code>name</code> 這個屬性怎麼辦？還有 <code>title</code>、<code>onmouseover</code> 這些 props？

有時把所有屬性都傳下去是不安全或啰嗦的。這時可以使用解構指派中的剩餘屬性特性來把未知屬性批量提取出來。

列出所有要目前使用的屬性，後面跟着 <code>...other</code>。

這樣能確定把所有 props 傳下去，除了 那些已經被使用了的。

注意: 上面例子中，<code>checked</code> 屬性也是一個有效的 dom 屬性。如果你沒有使用解構指派，那麼可能無意中把它傳下去。

在傳遞這些未知的 <code>other</code> 屬性時，要經常使用解構指派模式。

如果元件需要使用一個屬性又要往下傳遞，可以直接使用 <code>checked={checked}</code> 再傳一次。這樣做比傳整個 <code>this.props</code>對象要好，因為更利于重構和文法檢查。

順序很重要，把 <code>{...other}</code> 放到 jsx props 前面會使它不被覆寫。上面例子中我們可以保證 input 的 type 是<code>"checkbox"</code>。

剩餘屬性可以把對象剩下的屬性提取到一個新的對象。會把所有在解構指派中列出的屬性剔除。

如果不使用 jsx，可以使用一些庫來實作相同效果。underscore 提供 <code>_.omit</code> 來過濾屬性，<code>_.extend</code> 複制屬性到新的對象。