props.history.listen 导致页面缓慢答案

【问题标题】：props.history.listen causing page slownessprops.history.listen 导致页面缓慢
【发布时间】：2022-01-24 04:30:47
【问题描述】：

在我的 React 应用程序中，我的一个常用功能组件中有以下代码。所以基本上，在每次路由更改时，我都会检查用户是否可以访问该页面（这种全局逻辑）

let history = useHistory();
props.history.listen((location, action) => {    
   checkIfUserHasAccessToPage();    
});

但是，使用此代码，我观察到后续页面导航（即用户在同一会话中时）的 UI 缓慢和滞后。

我可以使用任何替代方法来避免性能问题吗？

【问题讨论】：

标签： reactjs react-hooks react-router

【解决方案1】：

如果您在函数组件主体中添加历史侦听器，则每次组件呈现时都会添加另一个侦听器。这是一个无意的副作用。您应该只添加一个历史监听器和回调。为此使用挂载useEffect 钩子，不要忘记返回unlisten 回调以在useEffect 钩子的清理函数中使用。

例子：

const history = useHistory();

React.useEffect(() => {
  const unlisten = history.listen((location, action) => {    
    checkIfUserHasAccessToPage();    
  });

  return unlisten;
}, []);

【讨论】：

非常感谢。我正在考虑的其他选项是 useEffect(() => {}, [location]);其中位置 = useLocation()
您认为上述替代方案也可以用于性能吗？
另外，如果我使用您的示例，那么对于清理，是否只是返回 unlisten ，因为您已经显示足够了？
@copenndthagen 当然，我想这也可以，因为您似乎实际上不需要location对象或导航操作（PUSH，@ 987654327@、POP 等...）。
@copenndthagen 是的，unlisten 是一个函数，从 useEffect 钩子返回的任何东西都被解释/预期为一个函数，它将在应用下一个效果之前或当组件正在卸载。