Reactjs useEffect何时在组件中触发WillUnmount？

我在博客上读到下面的声明，上面写着这样的话

useEffect(() => {
  API.getUser(userId);
}, [userId]);

或者，第二个参数也可以是空数组，例如 这种情况下，它将仅在

componentDidMount

上执行，并且

componentWillUnmount

并且该效果不会在

componentdiddupdate

上运行

---

卸载组件时是否执行了

API.getUser

（

componentWillUnmount

）？我知道当你从A页转到B页时，

componentUnmount

会触发。我现在很困惑，对我来说，上面的代码就像

componentDidMount

，因为

userId

将从

未定义的
更改为
id
一次
 您可以从useEffect返回清除函数，该函数将在卸载之前运行

useEffect(() => {
  const subscription = props.source.subscribe(); // this will fire at after did Mount/ didUpdate
  return () => {
    // Clean up the subscription
    subscription.unsubscribe(); // this will afire at willUnmount
  };
});

如果将空数组作为第二个参数传递

useEffect(() => {
  const subscription = props.source.subscribe(); // this run only after first rnede i.e componentDidmount
  return () => {
    // Clean up the subscription
    subscription.unsubscribe(); // this will afire at willUnmount ie componentWillUnmount
  };
}, []);

您可以从useEffect返回清除函数，该函数将在卸载之前运行

useEffect(() => {
  const subscription = props.source.subscribe(); // this will fire at after did Mount/ didUpdate
  return () => {
    // Clean up the subscription
    subscription.unsubscribe(); // this will afire at willUnmount
  };
});

如果将空数组作为第二个参数传递

useEffect(() => {
  const subscription = props.source.subscribe(); // this run only after first rnede i.e componentDidmount
  return () => {
    // Clean up the subscription
    subscription.unsubscribe(); // this will afire at willUnmount ie componentWillUnmount
  };
}, []);

您对这句话有点困惑，它不是传递空数组时卸载时执行的效果，而是将要执行的useffect中返回的cleanup函数

例如，您可以具有如下效果

useEffect(() => {
  API.getUser(userId);
  return () => {
      // cancel api here
  }
}, [userId]);

因此，在上面的示例中，useEffect返回的匿名函数将在第二次运行效果之前（当用户ID更改时发生）或在卸载时被调用，它不是传递空数组时卸载时执行的效果，而是将要执行的useffect中返回的cleanup函数

例如，您可以具有如下效果

useEffect(() => {
  API.getUser(userId);
  return () => {
      // cancel api here
  }
}, [userId]);

因此，在上面的示例中，useEffect返回的匿名函数将在第二次运行效果之前（当用户ID更改时发生）或在卸载时调用。其为true。如果将空数组作为第二个参数传递，则useEffect将仅在第一次渲染后运行，而不会在每次更新后运行。并且retunred函数将在卸载之前运行。您的第一个代码块有注释///这将在willUnmount时触发。您的意思是什么？空数组将产生useffect，就像@eramit2010所说的那样。对于Hanz代码，每次更改
useId
时，useEffect中的代码将运行useEffect中的第二个参数是Dependencies。所以，如果您将其作为空数组传递，它会告诉useEffect仅在第一次呈现（componentDidUpdate）之后运行，返回的函数是clean up函数，因此它将在卸载（componentWillUnmount）之前运行，以避免混淆：对于第一个代码示例
subscription.unsubscribe（）
将在
cWU
上运行，但也将在每次重新渲染之前运行。否。这是真的。如果将空数组作为第二个参数传递，则useEffect将仅在第一次渲染后运行，而不会在每次更新后运行。并且retunred函数将在卸载之前运行。您的第一个代码块有注释///这将在willUnmount时触发。您的意思是什么？空数组将产生useffect，就像@eramit2010所说的那样。对于Hanz代码，每次更改
useId
时，useEffect中的代码将运行useEffect中的第二个参数是Dependencies。所以，如果您将其作为空数组传递，它会告诉useEffect仅在第一次呈现（componentDidUpdate）之后运行，返回的函数是clean up函数，因此它将在卸载（componentWillUnmount）之前运行，以避免混淆：对于第一个代码示例
subscription.unsubscribe（）
将在
cWU
上运行，但也将在每次重新渲染之前运行。这是一个很长的阅读，但正如创建者所说的
useffect
完整指南：这是一个很长的阅读，但正如创建者所说的
useffect
完整指南：是的，因为它没有第二个返回函数A由于没有第二个返回函数，因此措辞令人困惑