反应路由器卸载功能组件

Question

我正在使用 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;
    }
}

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

我正在使用钩子，所以我重写了组件：

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

    return null;
}

而且很奇怪的是，在运行应用程序时，之间导航/aaa和/bbb执行console.log是CMP已卸载。
知道如何使用函数组件和钩子防止不必要的卸载吗？

Answer 1

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

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

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

Answer 2

这是人们在使用 hook 时面临的一个非常常见的问题useEffect。

useEffect每次重新渲染组件时都会调用钩子。钩子的第二个参数需要一个依赖项数组，因此只有当依赖项发生更改时才会调用钩子。如果您向其提供空数组，则钩子将仅在挂载时运行，并且返回的函数将在卸载之前调用。

提示：将此 ESLint 插件添加到您的项目中以查找此类钩子相关问题。https://www.npmjs.com/package/eslint-plugin-react-hooks

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

import './styles.css';

const DemoComponent = () => {
  useEffect(() => {
    return () => {
      console.log('******************* UNMOUNTED');
    };
  }, []);
  return <div>Demo Component</div>;
};

const HomeComponent = () => {
  return <div>Home Component</div>;
};

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">To Home</Link>
        <br />
        <Link to="/aaa">To AAA</Link>
        <br />
        <Link to="/bbb">To BBB</Link>
      </div>
      <Switch>
        <Route path="/(aaa|bbb)" component={DemoComponent} />
        <Route path="/" component={HomeComponent} />
      </Switch>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);  

这是工作示例：https://codesandbox.io/s/9l393o7mlr

Answer 3

组合 componentDidMount 和 componentWillUnmount

这意味着您可以在同一个 useEffect 函数调用中使用 componentDidMount 和 componentWillUnmount 。显着减少管理这两个生命周期事件所需的代码量。这意味着您可以在功能组件中轻松使用 componentDidMount 和 componentWillUnmount 。像这样：更多更新请反应：UseEffect

import React, { useEffect } from 'react';
    const ComponentExample => () => {
        useEffect(() => {
            // Anything in here is fired on component mount.
            return () => {
                // Anything in here is fired on component unmount.
            }
        }, [])
    }