如何仅在组件卸载时在 useEffect() 中执行清理功能

Question

我只想在卸载组件时清除过滤器。所以我只在useEffect()中写了清理函数。但是当我用 console.log() 检查它时，在组件安装后也打印了 1 。这样有什么问题吗？

useEffect(() => {
  return () => {
    clearFilters();
    console.log(1);
  };
}, []);

堆栈片段：

const { useState, useEffect } = React;

const Example = () => {
    useEffect(() => {
        return () => {
            // clearFilters();
            console.log(1);
        };
    }, []);
    return <div>x</div>;
};

const App = () => {
    const [showExample, setShowExample] = useState(false);
    
    return <div>
        <label>
            <input type="checkbox" checked={showExample} onChange={({currentTarget: {checked}}) => setShowExample(checked)} />
            Show <code>Example</code> component
        </label>
        <div>
            {showExample ? <Example /> : null}
        </div>
    </div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

下面是更详细的代码

import React, { useEffect } from 'react';
import { useFilterContext } from 'contexts/FilterContext';
import classNames from 'classnames/bind';
import Rating from 'components/Rating/Rating';
import { Button, Form } from 'react-bootstrap';
import styles from './Filter.module.scss';

const cn = classNames.bind(styles);

const Filter = () => {
  const {
    filters: { byAscendingPrice, byStock, byFastDelivery, rating },
    dispatch,
  } = useFilterContext();

  const clearFilters = () => dispatch({ type: 'CLEAR_FILTERS' });
  useEffect(() => {
    return () => clearFilters();
  }, []);

  return (
     // Some components
  );
};

export default Filter;

Answer 1

您可能在开发中使用 React strict mode which simulates unmounting and remounting a component when a component is mounted. This causes double renders。

Answer 2

这是因为严格模式。在严格模式下，React 可能会多次调用渲染阶段生命周期。所以它在组件的安装上打印 1 。但是这里要注意的有趣的一点是，它只发生在开发模式下，而不是生产模式下。

这里是 link 阅读更多关于 React 严格模式的信息：Link

如何仅在组件卸载时在 useEffect() 中执行清理功能

how to execute cleanup function in useEffect() only when component unmounts

javascript

reactjs