javascript - 跨多个组件重用 React.useCallback() 函数

Question

我有一些组件都在onPress处理程序上调用相同的函数，假设它如下所示：

function MyComponent () {
  const dispatch = useDispatch()

  const updateThing = React.useCallback((thingId: string) => {
    dispatch(someActionCreator(thingId))
    someGlobalFunction(thingId)
  }, [dispatch])

  return (
    <View>
      <NestedComponent onUpdate={updateThing} />
    </View>
  )
}

我想将此功能移到组件之外，以便我可以重新使用它，我认为它看起来像这样：

const updateThing = React.useCallback(myFunction)

但是，它有一个依赖项dispatch，我需要传入并添加到依赖项数组中。

我怎样才能打破这个功能以供重用，同时还能从中获得性能提升useCallback？

Answer 1

您可以编写一个自定义钩子，例如

export const useUpdateThinkg = () => {
  const dispatch = useDispatch()

  const updateThing = React.useCallback((thingId: string) => {
    dispatch(someActionCreator(thingId))
    someGlobalFunction(thingId)
  }, [dispatch])
  return { updateThing };
}

---

然后像这样使用它

import { useUpdateThing } from 'path/to/updateThing'
function MyComponent () {
  const { updateThing} = useUpdateThing();

  return (
    <View>
      <NestedComponent onUpdate={updateThing} />
    </View>
  )
}