React Context API、大数组和应用程序速度

Question

应用程序基于 Node/React/Express。

我有一个 table 组件，然后是 table 中每一行的子组件，它是从一个数组 (clients) 动态生成的，该数组是从数据库中收集的反应上下文 api 调用并存储在状态中。然后我映射数组并为每个客户端创建一行（Client 组件）。

 <TableBody>
   {clients.map(client => (
    <Client
     key={client.id}
     client={client}
     handleSnackBar={this.props.handleSnackBar}
     handleSendMail={this.props.handleSendMail}
    />
   ))}
 </TableBody>

在这些行的每一行上都有一个可以激活或停用客户帐户的按钮....现在数组（客户列表）最多有 1000 条记录，需要整整 3 秒才能激活或停用帐户并反映更改。

我正在寻找 a) 我正在做的任何问题，b) 加速这个过程和优化代码的建议，c) Redux 是更好的选择吗？或者，我想，d) 我是否有不切实际的期望，我应该只添加一个加载微调器并称其为好？

Answer 1

激活和停用客户端的代码在哪里？在 Table 组件中还是在客户端组件中？
您是如何更新客户项目的？您是更新整个客户群还是只更新当前项目？
您的客户端组件是否使用了 PureComponent？

为 1。最好将 activate/desactivate 东西放在您的客户端组件中。因此，每个客户端组件都会管理他的状态，这样当您 activate/desactivate 一个客户端时，更新的并不是您的整个 table。

2个。就像 1 中所说的那样。更好地管理每个客户端组件的所有内容。您可以创建一个 UncontrolledComponent，这样组件不会在每次 Table 组件的状态发生变化时更新。为此，请在此处查看文档 https://reactjs.org/docs/uncontrolled-components.html

对于 3。当您使用大量数据时，最好使用 PureComponent，因为它可以更好地管理其状态并提高性能。有关详细信息，请参阅文档 https://reactjs.org/docs/react-api.html#reactpurecomponent

React Context API、大数组和应用程序速度

React Context API, large array, and application speed

node.js

reactjs

sequelize.js

loading

react-context