时间戳

首页 > 解决方案 > componentWillUnmount 与 React useEffect 挂钩

javascript - componentWillUnmount 与 React useEffect 挂钩

问题描述

如何使用useEffect钩子（或任何其他钩子）进行复制componentWillUnmount？

在传统的类组件中，我会做这样的事情：

class Effect extends React.PureComponent {
    componentDidMount() { console.log("MOUNT", this.props); }
    componentWillUnmount() { console.log("UNMOUNT", this.props); }
    render() { return null; }
}

用useEffect钩子：

function Effect(props) {
  React.useEffect(() => {
    console.log("MOUNT", props);

    return () => console.log("UNMOUNT", props)
  }, []);

  return null;
}

（完整示例：https ://codesandbox.io/s/2oo7zqzx1n ）

这不起作用，因为返回的“清理”函数会useEffect捕获安装期间的道具，而不是卸载期间道具的状态。

如何在每次道具更改时不运行函数体（或清理）的useEffect情况下获得最新版本的道具？

一个类似的问题没有解决访问最新道具的部分。

反应文档状态：

如果你想运行一个效果并且只清理一次（在挂载和卸载时），你可以传递一个空数组（[]）作为第二个参数。这告诉 React 你的效果不依赖于任何来自 props 或 state 的值，所以它永远不需要重新运行。

但是在这种情况下，我依赖于道具......但仅限于清理部分......

标签： javascriptreactjsreact-hooksreact-lifecycle

解决方案

您可以使用 useRef 并将要使用的道具存储在闭包中，例如渲染 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>;
}

演示

然而，更好的方法是将第二个参数传递给，useEffect以便清理和初始化发生在所需道具的任何更改上

React.useEffect(() => {
  return () => {
    console.log(props.current);
  };
}, [props.current]);

推荐阅读