props.history.listen导致页面缓慢

Question

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

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

然而，使用这段代码，我观察到在后续页面导航时UI的缓慢和滞后，即当用户处于同一会话时。

有什么替代方案可以用来避免性能问题吗？

Answer 1

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

示例：

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