React組件具有很強(qiáng)的靈活性和功能性。 在JS.COACH上有很多組件庫可供使用，但隨著時(shí)間的增長組件會(huì)變得非常臃腫。

與任何其他類型的編程一樣，遵守單一原則不僅使您的組件更易于維護(hù)，而且還可以實(shí)現(xiàn)更多的復(fù)用。 但是，確定如何分離大型React組件的職責(zé)并不是很容易的。 這里有三種技巧讓你從簡單到復(fù)雜的方式學(xué)會(huì)拆分組件。

拆分render()

這是使用最多的，也是最簡單的方式：當(dāng)組件呈現(xiàn)太多元素時(shí)，將這些元素拆分為邏輯子組件。

拆分render() 是一個(gè)常見且快速的方式，是在同一個(gè)class中創(chuàng)建其他“子組件”方式：

class Test extends React.Component {
  renderItem() {
    // ...
  }

  renderHeader() {
    // ...
  }

  render() {
    return (
      <View>
        {this.renderItem()}
        {this.renderHeader()}
      </View>
    );
  }
}

雖然上面的方法也可以，但它不是真正的分解組件。頁面中的state, props, 和類方法仍然是共享的，因?yàn)檫€是很難確定哪個(gè)“子組件”使用哪些方法。

無狀態(tài)組件

要真正降低復(fù)雜度，應(yīng)該創(chuàng)建全新的組件。對于更簡單的子組件，功能組件可以使用以下的方式創(chuàng)建，也就是無狀態(tài)組件，用來保證低耦合：

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>
    );
  }
}

通過這種方式拆分，有一個(gè)重要的差異。使用無狀態(tài)組件替代直接的函數(shù)調(diào)用，可以為React生成較小的單元。通過使用淺渲染來輕松隔離這些單元進(jìn)行獨(dú)立測試。
而對于性能來說，這樣做會(huì)更好，因?yàn)檩^小的單元將更有效的執(zhí)行渲染。

創(chuàng)建獨(dú)立的React組件

如果組件由于多種屬性或者變化而變得復(fù)雜，可以考慮將組件拆分成具有一個(gè)多個(gè)公開屬性的模板組件。這樣可以讓父組件更專注于數(shù)據(jù)傳遞，將邏輯層放在子組件中。單獨(dú)的組件維護(hù)各自的生命周期。

例如：在開發(fā)過程中，某些子組件可能會(huì)有不同的操作或者加載不同的數(shù)據(jù)，利用React中的props來傳遞參數(shù)，通過參數(shù)來控制子組件的樣式。

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='點(diǎn)擊我' />
      </View>
    );
  }
}

主組件可以獨(dú)立負(fù)責(zé)數(shù)據(jù)傳遞或者action操作。

class Test extends React.Component {
  render() {
    return <TestItem title={'我是標(biāo)題'} 
                     press={()=>{alert('我是點(diǎn)擊事件')} />;
  }
}

在JSX中，組件的開始和結(jié)束標(biāo)簽之間的任何東西都可以作為特殊的子組件傳遞。當(dāng)正確使用時(shí)，都可以表現(xiàn)出來。

高階組件

高階組件展示了React的強(qiáng)大的組合性質(zhì)。通常用于React庫，例如react-redux，styled-components和react-intl。 畢這些庫都是解決任何React應(yīng)用程序的通用方面。

結(jié)語

React的設(shè)計(jì)模式是高度可組合組件化。 通過分解和組合它們，可以解決很多問題。不要為了麻煩去討厭創(chuàng)建子組件，起初可能會(huì)感覺很麻煩，但最終會(huì)發(fā)現(xiàn)程序的性能和組件的可復(fù)用性都會(huì)有很大的提高。