使用 React 钩子时实用程序函数的正确模式是什么?

Question

我一直在使用 react 钩子，但我发现一件很痛苦的事情是需要将大量变量传递到我的实用程序函数中，因为我不再可以访问它们。 例如，假设我有一个这样的组件：

export const ListItem(props) {
const {id, item, itemStatuses, workflows, taks} = props
const [checked, setChecked] = useState(false)
return (
<CheckboxItem
key={id}
title={item.title}
onPress={() => handleCheckboxPress(id, item, itemStatuses, 
setChecked, workflows)}
/> 
)
}

handleCheckboxPress 是组件之外的一个函数，它运行一堆逻辑，需要组件中的所有(或大部分(道具来找出某种状态，然后还需要 setState 回调才能更改一些内部状态。

在过去，我只会将它们作为类的方法，并且我可以访问所有 props 和 setStates 等。

是否有一些模式可以避免将所有这些道具传递到一堆实用程序函数中？

我已经读到将所有这些逻辑放在组件内部的函数中对性能不利，因为 react 会在每次渲染时重新创建所有这些函数。 这是真的还是有效的模式，因为这可以解决我的痛点。

Answer 1

在您的示例中，您希望使用useCallback

export const ListItem(props) {
const {id, item, itemStatuses, workflows, taks} = props
const [checked, setChecked] = useState(false)
const handlePress = useCallback(() => {
// I have access to props now
}, [id, item /* ... */ ])
return (
<CheckboxItem
key={id}
title={item.title}
onPress={handlePress}
/> 
)
}