提高React用戶界面性能的良好實踐？

我目前正面臨着我的一個React應用程序的性能問題。是否有任何好的做法可以改善用戶界面的「反應性」。提高React用戶界面性能的良好實踐？

我可以例如減少JavaScript in JSX條件的數量，如{ carIsRed === true ? <RedCar /> : <BlackCar /> }但它們大多數都是必需的。

我使用react-scrollbar-x來顯示大型表格，它可能會影響我的應用程序的整體性能。

是否還有其他值得關注的問題，可以提高用戶界面的性能？

這裏是我的組件的一部分：

 {element.description.length > 0 ? 
     <Popup 
      trigger={ 
      <Table.Cell style={{ verticalAlign:'middle', maxWidth: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> 
       {(editProject === false) || (editProject === true && editProjectIndex !== index) ? 
       element.description 
       : null} 
       {editProject === true && editProjectIndex === index ? 
       <Form> 
        <TextArea 
        autoHeight 
        placeholder='Description' 
        value={this.state.newProjectDescription} 
        onChange={this.handleChangeNewProjectDescription} 
        /> 
       </Form> 
       : null} 
      </Table.Cell> 
      } 
      content={element.description} 
      basic 
     /> : 
     <Table.Cell style={{ verticalAlign:'middle', maxWidth: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} negative={element.description.length === 0}> 
      {(editProject === false) || (editProject === true && editProjectIndex !== index) ? 
      element.description 
      : null} 
      {editProject === true && editProjectIndex === index ? 
      <Form> 
       <TextArea 
       autoHeight 
       placeholder='Description' 
       value={this.state.newProjectDescription} 
       onChange={this.handleChangeNewProjectDescription} 
       /> 
      </Form> 
      : null} 
     </Table.Cell> 
     }

這裏是我的分量接口，我想爲這對提高渲染過程

來源

2017-07-28 awzx

陣營沒有性能問題，直到你開始進入成千上萬個部件組成。沒有看到具體的例子，我們可以做的不多。 –

感謝您的反饋，我會更新我的問題。 – awzx

「我目前正面臨着我的一個React應用程序的性能問題......」，請注意指出什麼是性能問題，以及您的預期性能會是什麼樣子？ – Pineda

有一個叫react-virtualized非常大包React中的表格可以提高渲染性能。

通過它的外觀，react-scrollbar-x正在使用this.setState（）在一個被稱爲許多次的方法中。這猜是你的性能下降

原因

如果您使用Chrome還有很大的擴展可視化應用的表現堪稱React Developer Tools

來源

2017-07-28 17:32:08

我認爲react-scrollbar-x是這種性能下降的主要原因。反應 - 虛擬化似乎是一個很棒的選擇！ – awzx

雅這裏有很多軟件包，在onscroll，onresize或ondrag等方法中調用this.setstate（）會導致性能下降 –

提高React用戶界面性能的良好實踐？

回答

相關問題