1、將通用的設計元素（按鈕，表單框，佈局組件等）拆成接口良好定義的可複用的組件，這樣下次開發界面程序時候可以寫更少的代碼，也意義着更高的開發效率，更少的Bug和更少的程序體積。
2、Prop驗證
隨着應用不斷變大，保證組件被正確使用變得非常有用。因此引入propTypes。React.PropTypes提供很多的驗證器（validator）來驗證傳入數據的有效性，當props傳入無效數據時，JavaScript控制檯會拋出警告
Ps：爲了性能考慮，只在開發環境驗證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!');
}
}
},
/* ... */
});
3、默認Prop值
React支持以聲明式的方式來定義props默認值
var ComponentWithDefaultProps=
React.createClass({
getDefaultProps: function() {
return {
value: 'defaultvalue'
};
}
/* ... */
});
當父級傳入props時，getDefaultProps（）可以保證this.props.value有默認值，注意getDefaultProps的結果會被緩存。得益於此，你可以直接使用props，而不必手動編寫一些無意義的代碼。
4、傳遞Props：小技巧
一些常用的React組件只是對HTML做簡單的擴展，通常，你想少寫代碼來把傳入組件的props複製到對應的HTML元素上，這時JSX的spread語法會幫到你：
var CheckLink =React.createClass({
render:function(){
//這樣會把CheckList所有的props複製到<a>
return <a{...this.props}>{‘ hhhhh'}{this.props.children}</a>
}
});
React.render(
<CheckLink href="/checked.html">
Click here!
</CheckLink>,
document.getElementById('example')
);
5、單個子級
React.Proptypes.element可以限定只能有一個子級傳入。
var MyComponent = React.createClass({
propTypes:{
chileren:React.PropTypes.element.isRequired
},
},
render:function(){
renturn(
<div>
{this.props.children}//有且僅有一個元素，否則會拋異常。
</div>
}
});
6、Mixins
組件是React裏服用代碼最佳方式，但是有時一些複雜的組件間也需要公用一些功能。React使用mixins來解決這類問題。
一個通用的場景是：一個組建需要定期更ixn，用setInterval（）做很容易，擔當不需要它的時候取消定時器來節省內存是非常重要的。React提供生命週期方法來公知組件創建或銷燬的時間。
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引入順序執行mixin裏的方法，最後執行組建內定義的方法。
