Reactjs SPA應用程序 - 作爲組件的一切（性能和實踐）

當我想要「組件化」小部分應用程序時，我發現這種反應非常合適，但我不確定要製作完整的組件應用程序， SPA。Reactjs SPA應用程序 - 作爲組件的一切（性能和實踐）

在我的例子中，我有一個菜單和一個內容位置的「視圖」，也是其他組件。

我發現要解決這個問題的方法是構建一個菜單組件，並在其渲染方法上檢查選擇了哪個選項並將其顯示在這個內容位置，它僅僅是render方法內的一個switch case（Smells但是很容易修復）

var MenuComponent = React.createClass({ 
    getInitialState: function() { 
    return { selectedPage: '' } 
    }, 
    handleMenuClick: function(e) { 
    this.setState({ selectedPage: e.target.attributes['data-page'].value}); 
    }, 
    render: function() { 
    return (
     <div className='main'> 
     <ul class='menu'> 
      <li><button onClick={this.handleMenuClick} data-page='applicantList'>Applicant List</button></li> 
      <li><button onClick={this.handleMenuClick} data-page='applicantForm'>Applicant Form</button></li> 
     </ul> 
     <div className='content'> 
      {function() { 
      switch(this.state.selectedPage) { 
       case 'applicantList': 
       return <ApplicantList /> 
       case 'applicantForm': 
       return <ApplicantForm /> 
       default: 
       return <h1>Select a Page</h1> 
      }; 
      }.bind(this)()} 
     </div> 
     </div> 
    ); 
    } 
});

從這一點我想像一切都是一個組件，並有他們的子組件等等。我想知道這種方法是否是一種很好的做法，是否存在性能或可維護性等缺陷（我發現單元測試更容易）。

來源

2014-02-13 Danillo Corvalan

將您的應用程序拆分爲許多小組件是一個好主意，因爲它往往使事情變得更容易理解。將每個組件看作一個功能，其參數是道具;考慮到這一點，或許你會像你所建議的那樣分裂事物的優勢更明顯一些。

單元測試是一個很好的理由，但分解成這樣的組件也往往使代碼更簡單，所以我肯定會推薦它。

來源

2014-02-13 16:09:31

謝謝本。對性能的任何考慮？假設我有30個視圖，其中每個視圖將被分解爲許多其他組件，狀態處理等等。在我提供的例子中，它必須要求所有這些組件。 –

組件非常便宜，幾乎沒有任何性能影響。實際上，使用更多的組件使您有機會以['shouldComponentUpdate'方法]（http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate）的形式進行_more_優化正確的地方。 –

Reactjs SPA應用程序 - 作爲組件的一切（性能和實踐）

回答

相關問題