Javascript 深入比较Redux减速器或组件'；应该更新哪些组件？

在我的React Redux应用程序中，一个

setInterval（）

连续调用一个action creater

this.props.getLatestNews（）

，该操作查询REST API端点。在获取API响应（对象数组）时，它将使用响应数组作为有效负载来调度操作

反应成分

class Newsfeed extends Component {
    constructor(props) {
        super(props);
        this.state = { ... }
    }

    componentWillMount() {
        this.updateTimer = setInterval(() => { this.props.getLatestNews() }, 1000);
    }

    componentWillUnmount() {
        clearInterval( this.updateTimer );
    }

    shouldComponentUpdate(nextProps, nextState) {
        // Should we do a deep compare of nextProps & this.props, 
        // shallow compare of nextState & thisState?
    }

    render() {
        return ( ... )
    }
}

const mapStateToProps = (state) => ({
    newsfeed: state.newsfeed
});

const mapDispatchToProps = (dispatch) => {
    return {
        getLatestNews: () => dispatch(getLatestNews())
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Newsfeed);

在reducer中，它当前总是更新部分状态，无论是否有任何更改

减速器

export default function newsfeedReducer(state=initialState, action) {
    switch (action.type) {
        case NEWSFEED_RECEIVED:
            // Or should we do the deep compare of `action.payload` with `state.items` here?
            return { ...state, items: action.payload }

        default:
            return state
    }
}

...

const rootReducer = combineReducers({
    newsfeed: newsfeedReducer
});

...

根部还原剂

export default function newsfeedReducer(state=initialState, action) {
    switch (action.type) {
        case NEWSFEED_RECEIVED:
            // Or should we do the deep compare of `action.payload` with `state.items` here?
            return { ...state, items: action.payload }

        default:
            return state
    }
}

...

const rootReducer = combineReducers({
    newsfeed: newsfeedReducer
});

...

在大多数情况下，当收到API结果时，Redux存储中没有不存在的新项。如果reducer仍然使用API结果替换存储的这一部分，则连接的组件将由于对

props

的新对象引用而重新渲染，除非我们在

shouldComponentUpdate（）中进行深入比较

为了避免对React组件进行不必要的重新渲染，我考虑在
shouldComponentMount（）
函数中对当前和下一个道具进行深入比较，或者将
action.payload
与它应该替换的
state.items
进行深入比较

建议在哪里进行深度比较？还是根本没有必要

谢谢大家!
 一般来说，在使用redux时，我们可以做出一些选择来避免重新渲染

在Reducer中：比较当前状态和api/操作负载结果，即您的未来/下一个状态。只需返回减速器中的上一个状态，就不会导致重新渲染

在组件中：如果您的比较取决于您的组件属性，则使用
shouldComponentUpdate
，它将
nextProps
和
nextState
作为参数
在操作中：如果要执行条件分派（即，如果对api结果不满意，则分派其他内容），则在操作中执行比较。您可以使用访问当前状态
注意-即使使用纯组件，组件仍将重新渲染，因为即使对象值相同，状态的对象引用也会更改

第1点演示-
应更新组件


第2点演示-
状态减速器等

什么是
应该安装组件
？你的意思是
应该更新组件吗？这将是您进行比较的地方。@jmargolisv很抱歉输入错误，应该是
shouldComponentUpdate
。您的意思是
mapStateToProps=（state）=>（{newsfeed:state.items}）
？Cus否则
状态。项的更改不会影响此组件。是的，我建议您在
newsfeedReducer（）
@hackape中进行深入比较。很抱歉，我忘记了将收到的
NEWSFEED\u的减缩器传递到根减缩器中这一事实。更新问题。