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. 激活和停用客户端的代码在哪里？在表组件中还是在客户端组件中？
2. 如何更新客户端项？您更新整个客户端数组还是仅更新当前项目？
3. 您是否将 PureComponent 用于客户端组件？

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

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

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