react-redux学习笔记

本文针对React+Redux实例中的shouldComponentUpdate函数做一个理解,

shouldComponentUpdate(nextProps) {
    return nextProps.state != this.props.state;
}

如果state是一个对象,使用这种表示也是正确的,我们从reducer开始理解。

// apple basket reducer

export default (state = {
    isPicking: false,
    newAppleId: 1,
    apples: [
        {
            id: 0,
            weight: 235,
            isEaten: false
        }
    ]
}, action) => {
    
    let newState ;
    

    switch (action.type) {
        case 'apple/BEGIN_PICK_APPLE':
            newState = Object.assign({}, state, {
                isPicking: true
            });
            return newState;

        case 'apple/DONE_PICK_APPLE':
            newState = Object.assign({}, state, {
                apples: [
                    ...state.apples,
                    {
                        id: state.newAppleId,
                        weight: action.payload,
                        isEaten: false
                    }
                ],
                newAppleId: state.newAppleId + 1,
                isPicking: false
            })
            return newState;

        case 'apple/FAIL_PICK_APPLE':
            //这里只是简单处理
            newState = Object.assign({}, state, {
                isPicking: false
            });
            return newState;

        case 'apple/EAT_APPLE':
            newState = Object.assign({}, state, {
                apples: [
                    ...state.apples.slice(0, action.payload),
                    Object.assign({}, state.apples[action.payload], { isEaten: true }),
                    ...state.apples.slice(action.payload + 1)
                ]
            })
            return newState;

        default:
            return state;
    }

};

从上面代码可以看出,reducerstate如果没有匹配到actionstate是没有更新的,也就是说在shouldComponentUpdate函数中,nextProps.state是没有更新的,即nextProps.state != this.props.state 返回false, shouldComponentUpdate函数也就不更新了。
如果有一个action匹配了,那么返回的newState与原来的state就不同了,导致了shouldComponentUpdate函数的更新。

    原文作者:wscops
    原文地址: https://segmentfault.com/a/1190000007932634
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞