小编Tra*_*mes的帖子

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

    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 会在每次渲染时重新创建所有这些函数。这是真的还是一个有效的模式，因为这可以解决我的痛点。

我有一个应用程序，它使用 redux 进行状态管理，使用 sagas 进行异步调用，并且我正在尝试找出正确的分页结构。我有一个这样的减速器：

function articles(
    state = {
        isFetching: false,
        didInvalidate: false,
        page: 1,
        items: []
    },
    action
) {
    switch (action.type) {
        case 'INVALIDATE_ARTICLE':
            return Object.assign({}, state, {
                didInvalidate: true,
                page: 1
            })
        case 'REQUEST_ARTICLES':
            return Object.assign({}, state, {
                isFetching: true,
                didInvalidate: false
            })
        case 'RECEIVE_ARTICLES':
            let updatedPage = 'max';
            if (action.response.result.length == 10) {
                updatedPage = state.page + 1
            };
            return Object.assign({}, state, {
                categoryId: action.category,
                isFetching: false,
                didInvalidate: false,
                items: action.response.result,
                lastUpdated: action.receivedAt,
                page: updatedPage …