Question

我有一个自定义钩子，可创建一个Web工作程序并向该工作程序注册一个回调：

const useMyHook(callback){ 
  React.useEffect(() => {
    let worker = /// create worker
    worker.onmessage = callback
  }, [callback])
}

要使用该钩子，用户必须知道将回调包装在React.useCallback中，否则每个渲染都将创建一个新的worker。

const callback = React.useCallback(() => doSomething())
useMyHook(callback)

如何更新钩子，以便用户可以简单地传递匿名函数useMyHook(() => doSomething())

Answer 1

在ref上设置回调，然后只要回调发生更改，就不会调用useEffect()：

const useMyHook(callback){ 
  const cb = useRef();

  cb.current = callback;

  React.useEffect(() => {
    const worker = /// create worker
    worker.onmessage = (...args) => cb.current(...args);
  }, [])
}

将回调传递给自定义react钩子

1 个答案: