提高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用户界面性能的良好实践？

回答

相关问题