我的一个 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>
}
这是我想要改进渲染过程的组件接口(interface)
最佳答案
有一个名为 react-virtualized 的包对于 React 中非常大的表，这对渲染性能有很大帮助。
从表面上看，react-scrollbar-x 在一个被多次调用的方法中使用了 this.setState() 。我猜测这是你表现下降的原因
如果您使用 Chrome，有一个很棒的扩展程序可以可视化您的应用程序的性能，名为 React Developer Tools
关于javascript - 提高 React 用户界面性能的良好实践？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45377617/