使用 React hooks 时实用函数的正确模式是什么？

Question

我一直在更多地使用反应钩子，但我发现一件痛苦的事情是需要将大量变量传递到我的实用函数中，因为我无法再访问它们了。例如，假设我有一个这样的组件：

    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}
        /> 
    )
}