跨多个组件重用 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>
  )
}