摘要：我們可以在組件的設(shè)計(jì)上，玩轉(zhuǎn)出很多花樣。但是，如何對(duì)一個(gè)功能復(fù)雜且臃腫的組件進(jìn)行分解，也許并不是一件簡(jiǎn)單的事情。同時(shí)，借助于新的算法引擎，兩個(gè)單元組件在渲染的效率上，樂(lè)觀地預(yù)計(jì)會(huì)有較大幅度的提升。

之前分享過(guò)幾篇關(guān)于React技術(shù)棧的文章：

做出Uber移動(dòng)網(wǎng)頁(yè)版還不夠 極致性能打造才見(jiàn)真章

解析Twitter前端架構(gòu) 學(xué)習(xí)復(fù)雜場(chǎng)景數(shù)據(jù)設(shè)計(jì)

React Conf 2017 干貨總結(jié)1: React + ES next = ?

React+Redux打造“NEWS EARLY”單頁(yè)應(yīng)用 一個(gè)項(xiàng)目理解最前沿技術(shù)棧真諦

一個(gè)react+redux工程實(shí)例

......

今天再來(lái)同大家討論 React 組件設(shè)計(jì)的一個(gè)有趣話題：分解 React 組件的幾種進(jìn)階方法。

React 組件魔力無(wú)窮，同時(shí)靈活性超強(qiáng)。我們可以在組件的設(shè)計(jì)上，玩轉(zhuǎn)出很多花樣。但是保證組件的Single responsibility principle: 單一原則非常重要，它可以使得我們的組件更簡(jiǎn)單、更方便維護(hù)，更重要的是使得組件更加具有復(fù)用性。

但是，如何對(duì)一個(gè)功能復(fù)雜且臃腫的 React 組件進(jìn)行分解，也許并不是一件簡(jiǎn)單的事情。本文由淺入深，介紹三個(gè)分解 React 組件的方法。

這是一個(gè)最容易想到的方法：當(dāng)一個(gè)組件渲染了很多元素時(shí)，就需要嘗試分離這些元素的渲染邏輯。最迅速的方式就是切割 render() 方法為多個(gè) sub-render 方法。

看下面的例子會(huì)更加直觀：

class Panel extends React.Component {
  renderHeading() {
    // ...
  }

  renderBody() {
    // ...
  }

  render() {
    return (
      

        {this.renderHeading()}
        {this.renderBody()}
      
    );
  }
  

細(xì)心的讀者很快就能發(fā)現(xiàn)，其實(shí)這并沒(méi)有分解組件本身，該 Panel 組件仍然保持有原先的 state, props, 以及 class methods。

如何真正地做到減少?gòu)?fù)雜度呢？我們需要?jiǎng)?chuàng)建一些子組件。此時(shí)，采用最新版 React 支持并推薦的函數(shù)式組件／無(wú)狀態(tài)組件一定會(huì)是一個(gè)很好的嘗試：

const PanelHeader = (props) => (
  // ...
);

const PanelBody = (props) => (
  // ...
);

class Panel extends React.Component {
  render() {
    return (
      

        // Nice and explicit about which props are used
        
        
      
    );
   }
 }
 

同之前的方式相比，這個(gè)微妙的改進(jìn)是革命性的。我們新建了兩個(gè)單元組件：PanelHeader 和 PanelBody。這樣帶來(lái)了測(cè)試的便利，我們可以直接分離測(cè)試不同的組件。同時(shí)，借助于 React 新的算法引擎 React Fiber，兩個(gè)單元組件在渲染的效率上，樂(lè)觀地預(yù)計(jì)會(huì)有較大幅度的提升。

回到問(wèn)題的起點(diǎn)，為什么一個(gè)組件會(huì)變的臃腫而復(fù)雜呢？其一是渲染元素較多且嵌套，另外就是組件內(nèi)部變化較多，或者存在多種 configurations 的情況。

此時(shí)，我們便可以將組件改造為模版：父組件類似一個(gè)模版，只專注于各種 configurations。

還是要舉例來(lái)說(shuō)，這樣理解起來(lái)更加清晰。

比如我們有一個(gè) Comment 組件，這個(gè)組件存在多種行為或事件。同時(shí)組件所展現(xiàn)的信息根據(jù)用戶的身份不同而有所變化：用戶是否是此 comment 的作者，此 comment 是否被正確保存，各種權(quán)限不同等等都會(huì)引起這個(gè)組件的不同展示行為。這時(shí)候，與其把所有的邏輯混淆在一起，也許更好的做法是利用 React 可以傳遞 React element 的特性，我們將 React element 進(jìn)行組件間傳遞，這樣就更加像一個(gè)模版：

class CommentTemplate extends React.Component {
  static propTypes = {
    // Declare slots as type node
    metadata: PropTypes.node,
    actions: PropTypes.node,
  };
  
  render() {
    return (
      

        
          
          
          // Slot for metadata
          {this.props.metadata}
          
        
    
        
        
        
          
          
          // Slot for actions
          {this.props.actions}
          
        
      
      ...
      

此時(shí)，我們真正的 Comment 組件組織為：

class Comment extends React.Component {
  render() {
    const metadata = this.props.publishTime ?
       :
      Saving...;
    
    const actions = [];
    if (this.props.isSignedIn) {
      actions.push();
      actions.push();
    }
    if (this.props.isAuthor) {
      actions.push();
    }
    
    return ;
  }
  

metadata 和 actions 其實(shí)就是在特定情況下需要渲染的 React element。

比如，如果 this.props.publishTime 存在，metadata 就是 ；反正則為 Saving...。

如果用戶已經(jīng)登陸，則需要渲染（即actions值為） 和 ，如果是作者本身，需要渲染的內(nèi)容就要加入 。

在實(shí)際開(kāi)發(fā)當(dāng)中，組件經(jīng)常會(huì)被其他需求所污染。

比如，我們想統(tǒng)計(jì)頁(yè)面中所有鏈接的點(diǎn)擊信息。在鏈接點(diǎn)擊時(shí)，發(fā)送統(tǒng)計(jì)請(qǐng)求，同時(shí)包含此頁(yè)面 document 的 id 值。常見(jiàn)的做法是在 Document 組件的生命周期函數(shù) componentDidMount 和 componentWillUnmount 增加代碼邏輯：

class Document extends React.Component {
  componentDidMount() {
    ReactDOM.findDOMNode(this).addEventListener("click", this.onClick);
  }
  
  componentWillUnmount() {
    ReactDOM.findDOMNode(this).removeEventListener("click", this.onClick);
  }
  
  onClick = (e) => {
    if (e.target.tagName === "A") { // Naive check for  elements
      sendAnalytics("link clicked", {
        documentId: this.props.documentId // Specific information to be sent
      });
    }
  };
  
  render() {
    // ...
    

function withLinkAnalytics(mapPropsToData, WrappedComponent) {
  class LinkAnalyticsWrapper extends React.Component {
    componentDidMount() {
      ReactDOM.findDOMNode(this).addEventListener("click", this.onClick);
    }

    componentWillUnmount() {
      ReactDOM.findDOMNode(this).removeEventListener("click", this.onClick);
    }

    onClick = (e) => {
      if (e.target.tagName === "A") { // Naive check for  elements
        const data = mapPropsToData ? mapPropsToData(this.props) : {};
        sendAnalytics("link clicked", data);
      }
    };
    
    render() {
      // Simply render the WrappedComponent with all props
      return ;
    }
  }

class Document extends React.Component {
  render() {
    // ...
  }
}

export default withLinkAnalytics((props) => ({
  documentId: props.documentId
}), Document);