时间戳

首页 > 解决方案 > 反应路由器卸载功能组件

reactjs - 反应路由器卸载功能组件

问题描述

我正在使用 React Router 并且有两条路由呈现相同的组件：

<Switch>
    <Route path="/aaa" component={Cmp} />
    <Route path="/bbb" component={Cmp} />
</Switch>

这是 Cmp 实现：

class Cmp extends Component {
    componentWillUnmount() {
        console.log('******************* UNMOUNTED');
    }

    render() {
        return null;
    }
}

正如我所料，在 Cmp 之间导航/aaa并/bbb不会卸载 Cmp。

我正在转向钩子，所以我重写了组件：

function Cmp() {
    useEffect(() => {
        return () => {
            console.log('******************* UNMOUNTED');
        };
    });

    return null;
}

非常令人惊讶的是，在运行应用程序时，在Cmp 已卸载的 console.log/aaa之间导航。 知道如何使用功能组件和钩子来防止不必要的卸载吗？/bbb

标签： reactjsreact-routerreact-router-v4react-hooks

解决方案

如果你想运行一个效果并且只清理一次（在挂载和卸载时），你可以传递一个空数组（[]）作为第二个参数。这告诉 React 你的效果不依赖于任何来自 props 或 state 的值，所以它永远不需要重新运行。这不是作为特殊情况处理的——它直接遵循依赖项数组的工作方式。...阅读更多

Cmp现在，每次重新渲染组件时都会调用您的效果。useEffect如果您只想在卸载时调用效果，则必须将第二个参数与空数组一起传递：

useEffect(() => {
    return () => {
        console.log('******************* UNMOUNTED');
    };
}, []);

推荐阅读