javascript 将子组件中的useCallback用于父回调

5vf7fwbs 于 2023-03-11 发布在 Java

关注(0)|答案(1)|浏览(148)

我有一个组件库，被几个应用程序使用，我使用一个回调函数作为useEffect中的一个 prop 传入。如果父组件没有，是否可以将其封装在子组件的useCallback中？而且父组件也不需要这样做。

const Parent = () => {
  const cb = () => { ... };
  return <Widget condition={true} callback={cb} />
};

const Widget = ({condition, callback}) => {
  const safeCallback = useCallback(callback, [callback]);
  useEffect(() => {
     safeCallback();
  }, [condition, safeCallback]);
}

如果父进程确实使用了useCallback，并且发生了两次，该怎么办？

const Parent = () => {
  const cb = () => { ... };
  const safeCb = useCallback(cb, [cb]);
  return <Widget condition={true} callback={safeCb} />
};

const Widget = ({condition, callback}) => {
  const safeCallback = useCallback(callback, [callback]);
  useEffect(() => {
     safeCallback();
  }, [condition, safeCallback]);
}

JavaScript

来源：https://stackoverflow.com/questions/75699749/using-usecallback-in-child-component-for-parent-callback

1条答案

按热度按时间

e7arh2l61#

首先你应该问问自己，如果你真的需要useEffect中的回调函数，也许它可以被重构到一个事件处理器中，你可以阅读更多关于摆脱here效果的内容。
如果这不是一个选项的方式，你可以确保，不传递一个不稳定的引用useEffect是这样的：

const Widget = ({ callback, condition }) => {
  const callbackRef = useRef(callback);
  useLayoutEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    callbackRef.current();
  }, [condition]);
}

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 将子组件中的useCallback用于父回调

1条答案

相关问题

热门标签

最新问答