javascript - 检查函数是否由 useCallback 创建？

Question

我有接受函数作为参数的钩子(Hook)。如果功能发生不必要的更改，则可能会导致额外的重新渲染。我想确保函数用 useCallback 包装。

即这是一个简化版本:

function useApi({ onSuccess }) {
  if (process.env.NODE_ENV !== 'production' && !isUseCallback(onSuccess)) {
    throw new Error();
  }

  useEffect(() => {
    fetch(...)
      .then(res => res.json())
      .then(onSuccess);
  }, [onSuccess]);
}

如果 onSuccess 发生不必要的更改，那么它将不必要地调用 API。是否可以使用 isUseCallback 函数？我想我必须编写一个自定义的 useCallback 来包装 React 的 useCallback。

Answer 1

您可以将回调包装在 useRef() 中以确保 useEffect() 回调具有对最近的 onSuccess 的引用:

function useApi({ onSuccess }) {
  const ref = useRef();

  ref.current = onSuccess;

  useEffect(() => {
    fetch(...)
      .then(res => res.json())
      .then(val => ref.current(val));
  }, []);
}

重要的是你写 .then(val => ref.current(val)) 而不仅仅是 .then(ref.current) 这样属性访问ref.current 在 fetch() 解析之前不会发生。这样 ref.current 等于传递给 useApi() 的最近的 onSuccess。