Question

我正在尝试创建正在使用一种效果的挂钩，其中副作用函数返回了清理回调。但是我只想在卸载组件时调用它，而不是在重新渲染时调用它。

用空的deps数组调用useEffect时，通常的方法在这里不起作用，因为在挂钩的第一次调用中，清理函数仅创建一次。但是我的清理工作是稍后创建的，因此无法更改它。


function useListener(data) {
  const [response, updateResponse] = useState(null);

  useEffect(
    () => {
      if (data) {
        const removeListener = callRequest(data, resp => {
          updateResponse(resp);
        });

        return removeListener;
      }
    },
    [data]
  );

  return response;
}

这归结为以下问题：在普通类组件中，willComponentUnmount可以基于当前组件状态做出决定，但是在useEffect的情况下，状态通过关闭传递给清理，并且没有状态改变后的信息传递方式

Answer 1

您可以使用useRef保存和更新您的回调函数

useRef（）钩不仅用于DOM引用。 “ ref”对象是一个通用容器，其当前属性是可变的，并且可以保存任何值，类似于类的实例属性。 more

function useListener(data) {
  const [response, updateResponse] = useState(null);
  const cleanUpCallbackRef = useRef(() => {});

  useEffect(
    () => {
      if (data) {
        cleanUpCallbackRef.current = callRequest(data, resp => {
          updateResponse(resp);
        });
      }
    },
    [data]
  );

  useEffect(() => {
    return () => {
      cleanUpCallbackRef.current();
    }
  }, []);
  return response;
}

我创建了一个简单的示例here

useEffect延迟创建的清理功能

1 个答案: