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中的非常大的表，有一个名为react-virtualized的包，可以帮助提高渲染性能。

通过它的外观，react-scrollbar-x在一个被称为无数次的方法中使用this.setState（）。猜测是你性能下降的原因

如果您正在使用Chrome，那么可以通过一个很棒的扩展程序来展示您应用的效果React Developer Tools

改善React用户界面性能的良好实践？

1 个答案: