React組件具有很強的靈活性和功能性。 在JS.COACH上有很多組件庫可供使用，但隨著時間的增長組件會變得非常臃腫。
與任何其他類型的編程一樣，遵守單一原則不僅使您的組件更易于維護，而且還可以實現更多的復用。 但是，確定如何分離大型React組件的職責并不是很容易的。 這里有三種技巧讓你從簡單到復雜的方式學會拆分組件。
拆分render()
這是使用最多的，也是最簡單的方式：當組件呈現太多元素時，將這些元素拆分為邏輯子組件。
拆分render() 是一個常見且快速的方式，是在同一個class中創建其他“子組件”方式：
class Test extends React.Component {
renderItem() {
// ...
}
renderHeader() {
// ...
}
render() {
return (
<View>
{this.renderItem()}
{this.renderHeader()}
</View>
);
}
}
雖然上面的方法也可以，但它不是真正的分解組件。頁面中的state, props, 和類方法仍然是共享的，因為還是很難確定哪個“子組件”使用哪些方法。
無狀態組件
要真正降低復雜度，應該創建全新的組件。對于更簡單的子組件，功能組件可以使用以下的方式創建，也就是無狀態組件，用來保證低耦合：
const TestItem = (props) => (
// ...
);
const TestHeader = (props) => (
// ...
);
class Test extends React.Component {
render() {
return (
<View>
// Nice and explicit about which props are used
<TestItem title={this.props.title}/>
<TestHeader title={this.props.title}/>
</View>
);
}
}
通過這種方式拆分，有一個重要的差異。使用無狀態組件替代直接的函數調用，可以為React生成較小的單元。通過使用淺渲染來輕松隔離這些單元進行獨立測試。
而對于性能來說，這樣做會更好，因為較小的單元將更有效的執行渲染。
創建獨立的React組件
如果組件由于多種屬性或者變化而變得復雜，可以考慮將組件拆分成具有一個多個公開屬性的模板組件。這樣可以讓父組件更專注于數據傳遞，將邏輯層放在子組件中。單獨的組件維護各自的生命周期。
例如：在開發過程中，某些子組件可能會有不同的操作或者加載不同的數據，利用React中的props來傳遞參數，通過參數來控制子組件的樣式。
class TestItem extends React.Component {
static propTypes = {
title: PropTypes.string,
press: PropTypes.func,
};
render() {
return (
<View>
<Text>{this.props.title}</Text>
<Button onPress={this.props.press} title='點擊我' />
</View>
);
}
}
主組件可以獨立負責數據傳遞或者action操作。
class Test extends React.Component {
render() {
return <TestItem title={'我是標題'}
press={()=>{alert('我是點擊事件')} />;
}
}
在JSX中，組件的開始和結束標簽之間的任何東西都可以作為特殊的子組件傳遞。當正確使用時，都可以表現出來。
高階組件
高階組件展示了React的強大的組合性質。通常用于React庫，例如react-redux，styled-components和react-intl。 畢這些庫都是解決任何React應用程序的通用方面。
結語
React的設計模式是高度可組合組件化。 通過分解和組合它們，可以解決很多問題。不要為了麻煩去討厭創建子組件，起初可能會感覺很麻煩，但最終會發現程序的性能和組件的可復用性都會有很大的提高。
