Javascript 组件将使用React-useEffect挂钩卸载

如何使用

useffect

钩子（或任何其他钩子）来复制

组件willunmount

在传统的类组件中，我将执行以下操作：

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

使用

useffect

hook：

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

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

  return null;
}

（完整示例：）

这不起作用，因为在

useffect

中返回的“cleanup”函数捕获装载期间的道具，而不是卸载期间的道具状态

如何在

useffect

clean中获得最新版本的道具，而不在每次道具更改时运行函数体（或cleanup）

一个类似的例子并没有涉及到使用最新道具的部分

国家：

如果希望运行一个效果并只清理一次（装载和卸载时），可以将空数组（[]）作为第二个参数传递。这告诉React，您的效果不依赖于道具或状态的任何值，因此它永远不需要重新运行

---

但是在这种情况下，我依靠道具。。。但仅对于清理部分…

您可以使用useRef并存储要在闭包中使用的道具，如render useffect return callback method

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>;
}

useLayoutEffect（）是您在2021年的答案

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

这相当于ComponentWillUnmount

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

useEffect（（）=>{
如果（元素）{
常数卡号=
elements.getElement（'cardNumber'）| |//检查我们是否已经创建了一个元素
创建（'cardNumber'，defaultInputStyles）；//如果没有创建，则创建
cardnumberrelation.mount（“#numberInput”）；
}
}，[要素]；

卸载组件时，您想做什么？这是一个更一般性的问题，因为我想知道是否有一些情况是不可能用钩子复制的。但一个具体的例子是在卸载时将道具存储到localStorage、IndexDB或类似的存储中，并在装载时读取它们。我不认为每次道具更改都应该这样做（例如按键（如果我们渲染输入字段），非常感谢！使用

useRef

有效。我还将您的技术应用于初始示例（在问题中引用）这里：仅供参考。虽然这是正确的答案……但它仍然非常不符合逻辑，特别是当您还依赖于本地状态时。使用类组件有时是更好的方法。我会将此解决方案重构为自定义挂钩。我调用我的

useStateEffect

，主要区别在于encies作为参数传递给effect函数，这是您访问当前值的方式。这里还有一个指向相应文档的链接：。来自文档：“如果effect返回函数，React将在清理时运行它：”很抱歉，但这并不能解决我提出的问题。我需要在卸载时访问道具，

useLayoutEffect

的行为与

useffect

在仅在依赖项更改（您传递的空数组）上运行方面没有什么不同因此，您的解决方案只能访问FunctionComponent的初始道具，而不能访问“最后道具”在卸载过程中。啊，对不起！那天早上我一直到6点才起床，所以我没有仔细阅读哈哈。我阅读了前两个问题并回答了这个问题。是的，你必须把你想关注的变量放在useRef中，以便直接访问最新的更改。useffect（）返回函数实际上在重新渲染后运行（使DOM不可访问）虽然useLayoutEffect（）返回函数在重新渲染之前运行（使DOM可访问）。这是我找到的最干净的解决方案，我认为它与您的类似。也许这在将来会有所帮助：）

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