javascript 带有 React useEffect 钩子的 componentWillUnmount
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55139386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
componentWillUnmount with React useEffect hook
提问by DaGardner
How can the useEffecthook (or any other hook for that matter) be used to replicate componentWillUnmount?
如何使用useEffect钩子（或任何其他钩子）来复制componentWillUnmount？
In a traditional class component I would do something like this:
在传统的类组件中，我会做这样的事情：
class Effect extends React.PureComponent {
componentDidMount() { console.log("MOUNT", this.props); }
componentWillUnmount() { console.log("UNMOUNT", this.props); }
render() { return null; }
}
With the useEffecthook:
带useEffect钩子：
function Effect(props) {
React.useEffect(() => {
console.log("MOUNT", props);
return () => console.log("UNMOUNT", props)
}, []);
return null;
}
(Full example: https://codesandbox.io/s/2oo7zqzx1n)
（完整示例：https: //codesandbox.io/s/2oo7zqzx1n）
This does not work, since the "cleanup" function returned in useEffectcaptures the props as they were during mount and not state of the props during unmount.
这是行不通的，因为返回的“清理”函数useEffect捕获了挂载期间的道具，而不是卸载期间道具的状态。
How could I get the latest version of the props in useEffectclean up withoutrunning the function body (or cleanup) on every prop change?
如何在每次道具更改useEffect时不运行函数体（或清理）的情况下获得最新版本的道具清理？
A similar questiondoes not address the part of having access to the latest props.
一个类似的问题没有解决获得最新道具的部分。
The react docsstate:
该反应文档状态：
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.
如果您只想运行效果并仅将其清理一次（在装载和卸载时），您可以传递一个空数组 ([]) 作为第二个参数。这告诉 React 你的 effect 不依赖于来自 props 或 state 的任何值，所以它永远不需要重新运行。
In this case however I depend on the props... but only for the cleanup part...
然而，在这种情况下，我依赖于道具......但仅用于清理部分......
采纳答案by Shubham Khatri
You can make use of useRef and store the props to be used within a closure such as render useEffect return callback method
您可以使用 useRef 并将要使用的道具存储在闭包中，例如 render useEffect 返回回调方法
function Home(props) {
const val = React.useRef();
React.useEffect(
() => {
val.current = props;
},
[props]
);
React.useEffect(() => {
return () => {
console.log(props, val.current);
};
}, []);
return <div>Home</div>;
}
However a better way is to pass on the second argument to useEffectso that the cleanup and initialisation happens on any change of desired props
然而，更好的方法是将第二个参数传递给 ，useEffect以便清理和初始化发生在所需道具的任何更改上
React.useEffect(() => {
return () => {
console.log(props.current);
};
}, [props.current]);
