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

Posted 2023-04-14

【中文标题】React Context API、大数组和应用程序速度

【英文标题】：React Context API, large array, and application speed

【发布时间】：2019-03-07 21:12:56

【问题描述】：

应用程序基于 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) 我是否有不切实际的期望，我应该添加一个加载微调器并称之为好？

【参考方案1】：

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

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

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

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

【讨论】：

#1。激活和停用功能位于客户端组件中。每行管理自己的状态。 #2。快速路由，通过 ID 定位客户端。然后分派将更新的整个数组发送到上下文......我想也许在这里你是对的，我可以尝试只针对该数组中的一个客户端。 #3 我会调查 PureComponent 的事情......谢谢！这很有帮助！

好的！还有另外两个？

如果成功了，别忘了标记为已解决！

切换到 PureComponent 可以将渲染时间从 4 秒缩短到 2.5 秒……所以这本身就是一个巨大的差异！

我还没能看到这个……但希望今天下午 :) 我会告诉你的！