設計接口的時候，把通用的設計元素（按鈕，表單框，布局組件等）拆成接口良好定義的可復用的組件。這樣，下次開發相同界面程序時就可以寫更少的代碼，也意義著更高的開發效率，更少的 Bug 和更少的程序體積。
## Prop 驗證
隨著應用不斷變大，保證組件被正確使用變得非常有用。為此我們引入`propTypes`。`React.PropTypes`?提供很多驗證器 (validator) 來驗證傳入數據的有效性。當向 props 傳入無效數據時，JavaScript 控制臺會拋出警告。注意為了性能考慮，只在開發環境驗證?`propTypes`。下面用例子來說明不同驗證器的區別：
~~~
React.createClass({
propTypes: {
// 可以聲明 prop 為指定的 JS 基本類型。默認
// 情況下，這些 prop 都是可傳可不傳的。
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 所有可以被渲染的對象：數字，
// 字符串，DOM 元素或包含這些類型的數組。
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符聲明 prop 為類的實例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 來限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 指定的多個對象類型中的一個
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定類型組成的數組
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定類型的屬性構成的對象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定形狀參數的對象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 以后任意類型加上 `isRequired` 來使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意類型
requiredAny: React.PropTypes.any.isRequired,
// 自定義驗證器。如果驗證失敗需要返回一個 Error 對象。不要直接
// 使用 `console.warn` 或拋異常，因為這樣 `oneOfType` 會失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
/* ... */
});
~~~
## 默認 Prop 值
React 支持以聲明式的方式來定義?`props`?的默認值。
~~~
var ComponentWithDefaultProps = React.createClass({
getDefaultProps: function() {
return {
value: 'default value'
};
}
/* ... */
});
~~~
當父級沒有傳入 props 時，`getDefaultProps()`?可以保證?`this.props.value`?有默認值，注意?`getDefaultProps`?的結果會被?_緩存_。得益于此，你可以直接使用 props，而不必寫手動編寫一些重復或無意義的代碼。
## 傳遞 Props：小技巧
有一些常用的 React 組件只是對 HTML 做簡單擴展。通常，你想少寫點代碼來把傳入組件的 props 復制到對應的 HTML 元素上。這時 JSX 的?_spread_?語法會幫到你：
~~~
var CheckLink = React.createClass({
render: function() {
// 這樣會把 CheckList 所有的 props 復制到 <a>
return <a {...this.props}>{'√ '}{this.props.children}</a>;
}
});
React.render(
<CheckLink href="/checked.html">
Click here!
</CheckLink>,
document.getElementById('example')
);
~~~
## 單個子級
`React.PropTypes.element`?可以限定只能有一個子級傳入。
~~~
var MyComponent = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired
},
render: function() {
return (
<div>
{this.props.children} // 有且僅有一個元素，否則會拋異常。
</div>
);
}
});
~~~
## Mixins
組件是 React 里復用代碼最佳方式，但是有時一些復雜的組件間也需要共用一些功能。有時會被稱為?[跨切面關注點](http://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用?`mixins`?來解決這類問題。
一個通用的場景是：一個組件需要定期更新。用?`setInterval()`?做很容易，但當不需要它的時候取消定時器來節省內存是非常重要的。React 提供?[生命周期方法](http://reactjs.cn/react/docs/working-with-the-browser.html#component-lifecycle)?來告知組件創建或銷毀的時間。下面來做一個簡單的 mixin，使用?`setInterval()`?并保證在組件銷毀時清理定時器。
~~~
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
var TickTock = React.createClass({
mixins: [SetIntervalMixin], // 引用 mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // 調用 mixin 的方法
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
});
React.render(
<TickTock />,
document.getElementById('example')
);
~~~
關于 mixin 值得一提的優點是，如果一個組件使用了多個 mixin，并且有多個 mixin 定義了同樣的生命周期方法（如：多個 mixin 都需要在組件銷毀時做資源清理操作），所有這些生命周期方法都保證會被執行到。方法執行順序是：首先按 mixin 引入順序執行 mixin 里方法，最后執行組件內定義的方法。
