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

Question

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

我有一个表格组件，然后是表格中每一行的子组件，它是从一个数组 (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

1. 激活和停用客户端的代码在哪里？在 Table 组件中还是在 Client 组件中？
2. 您是如何更新客户项目的？您更新整个客户端数组还是仅更新当前项目？
3. 您是否将 PureComponent 用于您的客户端组件？

对于 1。 最好将激活/停用的东西放在您的客户端组件中。因此，每个客户端组件都会管理他的状态，这样当您激活/停用客户端时，更新的不是您的整个表。

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

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