React User Interfaceのパフォーマンスを改善するための良い方法はありますか？

Question

私は現在、私の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> 
     } 

ここで私は、レンダリングプロセス

Answer 1

を改善したい対象の私のコンポーネントのインタフェースがあります非常に大きいためreact-virtualizedというパッケージがありますReactのテーブルを使用して、レンダリングのパフォーマンスを大幅に向上させます。

react-scrollbar-xは、それを見て、this.setState（）を使用して、何回も呼ばれるメソッドの中でthis.setState（）を使用しています。これは推測していますことはあなたのパフォーマンス低下の原因である

あなたがChromeを使用している場合、アプリケーションのパフォーマンスを視覚化するのに最適な拡張機能がある