带有 React useEffect 钩子的 componentWillUnmount

IT技术 javascript reactjs react-hooks react-lifecycle
2021-04-28 08:26:21

如何使用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捕获了挂载期间的props，而不是卸载期间props的状态。

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

一个类似的问题没有解决获得最新props的部分。

该react文档状态：

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

然而，在这种情况下，我依赖于props......但仅用于清理部分......

3个回答

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

演示

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

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

useLayoutEffect() 是你在 2021 年的答案

useLayoutEffect(() => {
    return () => {
        // Your code here.
    }
}, [])

这等效于 ComponentWillUnmount。

99% 的情况下您都想使用 useEffect，但是如果您想在卸载 DOM 之前执行任何操作，那么您可以使用我提供的代码。

useEffect(() => {
  if (elements) {
    const cardNumberElement =
      elements.getElement('cardNumber') ||  // check if we already created an element
      elements.create('cardNumber', defaultInputStyles); // create if we did not
            
    cardNumberElement.mount('#numberInput');
  }
}, [elements]);
其它你可能感兴趣的问题
上一篇Prusa i3 MK2 不接受打印材料 下一篇有没有人遇到过这种奇怪的印刷图案？