反应路由器卸载功能组件

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

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works. ...read more

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

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

Answer 2

这是人们在使用 useEffect 钩子时面临的一个非常普遍的问题。

useEffect hook 将在每次组件 re-rendered 时被调用。 hook 的第二个参数需要一个依赖项数组，因此只有在依赖项发生变化时才会调用 hook。如果你向它提供空数组，挂钩将运行仅在挂载时并且返回的函数将在卸载之前被调用。

提示：将此 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

Combining both componentDidMount and componentWillUnmount

这意味着您可以在同一个 useEffect 函数调用中使用 componentDidMount 和 componentWillUnmount。显着减少管理这两个 life-cycle 事件所需的代码量。这意味着您可以轻松地在功能组件中使用 componentDidMount 和 componentWillUnmount。像这样：更多更新请 React: 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.
            }
        }, [])
    }

反应路由器卸载功能组件

react router unmount function component

reactjs

react-router

react-router-v4

react-hooks