Question

我在博客中阅读了以下声明，内容如下：

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

第二个参数也可以只是一个空数组，在在这种情况下，它将仅在componentDidMount上执行 componentWillUnmount，并且效果不会在componentDidUpdate上产生。

卸载组件（API.getUser）时是否执行componentWillUnmount？据我所知componentWillUnmount在您从A页转到B页时触发。对于我来说，我现在感到困惑，上面的代码就像componentDidMount一样，因为userId将从{{1 }}到undefined一次。

Answer 1

您对措辞有些困惑，它不是传递空数组时在卸载时执行的效果，而是清除功能，它是将在useEffect中返回的功能。

例如，您可以具有上述效果

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

因此在上面的示例中，将在第二次运行效果之前（在userId更改时发生）或在卸载时调用useEffect返回的匿名函数

Answer 2

您可以从useEffect返回清除功能，该功能将在unMount之前运行

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何时在componentWillUnmount中触发？

2 个答案: