Question

在卸载组件但可以使用当前道具时，我需要清理useEffect。像componentWillUnmount一样，可以通过获取this.props.whatever

这是一个小例子：单击“设置计数”按钮5次，然后查看您的控制台。您将在B组件的console.log中看到0，无论“ count”为5 https://codesandbox.io/embed/vibrant-feather-v9f6o

如何实现在useEffect清理功能（本例中为5）中获取当前道具的行为？

更新：将count传递给useEffect的依赖项将无济于事，因为：

每次将新计数传递给道具时，都会调用清理
最后一个值为4，而不是所需的5

Answer 1

从另一个问题中提到这个问题，由于没有公认的答案，因此将对其进行一些严肃的挖掘。

您想要的行为永远不会发生，因为B永远不会以计数值为5进行渲染，而当count为5时，组件A将不会渲染组件B，因为它将渲染B的卸载后的而不是呈现的最后一个值B为4。

如果要让B在卸载时记录它拥有的最后一个计数值，可以执行以下操作：

请注意，效果会在所有组件渲染完成后执行

const useIsMounted = () => {
  const isMounted = React.useRef(false);
  React.useEffect(() => {
    isMounted.current = true;
    return () => (isMounted.current = false);
  }, []);
  return isMounted;
};
const B = ({ count }) => {
  const mounted = useIsMounted();
  React.useEffect(() => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    return () => !mounted.current && console.log(count);
  }, [count, mounted]);

  return <div>{count}</div>;
};
const A = () => {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  if (count === 5) {
    //B will never be rendered with 5
    return <div>Unmounted</div>;
  }

  return (
    <React.Fragment>
      <B count={count} />
      <button onClick={handleClick}>Set count</button>
    </React.Fragment>
  );
};

ReactDOM.render(<A />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

由于您将空数组作为useEffect的依赖项列表传递，因此效果函数仅在第一次注册。当时，count的值为0。这就是在useEffect内附加到函数的count的值。如果要掌握最新的计数值，则需要useEffect在每个渲染器上运行。删除空数组依赖项。

useEffect(() => {
  return () => console.log(count);
})

或使用count作为依赖项。这样，每次更改计数时都会重新创建效果功能，并且还会创建一个可以访问最新计数值的新清除功能。

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

Answer 3

您需要在count中跟踪useEffect：

import React, { useEffect } from "react";

const B = ({ count }) => {
  useEffect(() => {
    return () => console.log(count);
  }, [count]);

  return <div>{count}</div>;
};

export default B;

对use进行反应，使用当前道具进行效果清理

3 个答案: