时间戳

首页 > 解决方案 > React useState 导致性能问题 - 处理菜单交互的正确方法

reactjs - React useState 导致性能问题 - 处理菜单交互的正确方法

问题描述

我有一个带有“菜单”的应用程序。“菜单”相当复杂，用户可以打开小div来实时设置影响应用的参数。该应用程序的结构如下：

Parent div with multiple useState instances to set parameters
    - Menu Child Div 
        - functions to set those state variables are all passed to this div
        - parent state is altered using these 
    - Main div where the results are displayed 
        - receives the state from the parent div and displays appropriately

它的工作方式是，当用户与菜单交互时，父级中的状态会发生变化，然后状态变化会在道具中传递给主子 div。这会导致性能问题，因为当菜单中的某些内容发生变化时应用程序必须重新渲染所有内容，并且存在如此多的状态变量可能是一个问题。

处理这个问题的最佳方法是什么？使用 useReducer 函数可能是一种选择，但我不确定仅此一项就可以解决问题。如何使主 div 响应菜单中的更改而无需重新渲染所有内容？

您如何处理菜单和主 div 之间的交互而无需重新渲染所有内容？

执行以下操作会解决性能问题吗？

Parent div does not address state
    - Menu Child Div 
        - interacts with redux state to change options
    - Main div where the results are displayed 
        - reads in and reacts to redux changes

标签： reactjsreact-reduxreact-hooks

解决方案

如果您希望 React 组件不重新渲染，除非本地状态/道具发生更改，您可以考虑将您的 React.Component 替换为 React.PureComponent。

每当您处理在组件订单之间传递的状态时，您可能需要考虑管理全局存储。您可以使用 Redux、MobX-State-Tree 或 Context API 等工具来完成此操作。如果您管理的是中大型项目，这将特别有用。

资源：

https://ozmoroz.com/2018/09/what-is-purecomponent/

这个资源有一些关于常用 React 工具的重要信息：

https://www.reactnative.express

当然，总有一些你可能很清楚的 React 文档：

https://reactjs.org/docs/hooks-intro.html

推荐阅读