如何避免在 react-redux 连接组件中重新渲染？

Question

我有 react-redux 组件 SideBar.js，它订阅了 redux 状态切片。当 redux 状态发生变化时，这个组件会不必要地重新渲染，即使它没有订阅 redux 中的变化状态。由于我的状态是嵌套的，我不想在 shouldComponentUpdate() 中进行深度比较以避免重新渲染...如何避免额外的重新渲染？

const mapStateToProps = (state) => {
    return {
        guestLogin:{
            status : state.guestLogin.status,
            marketPlace:state.guestLogin.marketPlace,
            newsFeed:state.guestLogin.newsFeed
        },
        accountLogin:{
            showMemberPosts:state.accountLogin.showMemberPosts,
            newsFeed: state.accountLogin.newsFeed,
            marketPlace:state.accountLogin.marketPlace,
            userInfo:state.accountLogin.userInfo
        },
        marketPlace:{
            reset:state.marketPlace.reset,
            disableFilters:state.marketPlace.disableFilters,
            filters:state.marketPlace.filters,


        }

    };
};

const mapDispatchToProps = dispatch => {
    return {
        guestMarketPlaceClickHandler :()=>{dispatch(marketPlaceCLickHandlerDispatcher())},
        guestNewsFeedClickHandler:()=>{dispatch(newsFeedClickHandlerDispatcher())},
        memberMarketPlaceClickHandler:()=>{dispatch(marketPlaceCLickHandlerDispatcher())},
        memberNewsFeedClickHandler:()=>{dispatch(newsFeedClickHandlerDispatcher())},
        myPostsClickHandler:()=>{dispatch(myPostsClickHandlerDispatcher());},
        dispatch:(action)=>{dispatch(action)}
    }
};

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

Answer 1

将您的组件连接到 redux 使其成为 PureComponent。也就是说，它将对道具进行浅层比较，以决定是否需要重新渲染。通过将您的商店值嵌套在 mapStateToProps 中，您可以保证浅层比较会失败。

即guestLogin: {...}每次都会为guestLogin的值创建一个新对象。

您可以使用reselect 或等效的解决方案来创建选择器，这些选择器在状态不变的情况下返回相同的对象，或者只是让您的 mapStateToProps 变浅，例如......

const mapStateToProps = (state) => {
    return {
        glStatus : state.guestLogin.status,
        glMarketPlace:state.guestLogin.marketPlace,
        glNewsFeed:state.guestLogin.newsFeed
        alShowMemberPosts:state.accountLogin.showMemberPosts,
        alNewsFeed: state.accountLogin.newsFeed,
        alMarketPlace:state.accountLogin.marketPlace,
        alUserInfo:state.accountLogin.userInfo
        mpReset:state.marketPlace.reset,
        mpDisableFilters:state.marketPlace.disableFilters,
        mpFilters:state.marketPlace.filters,
    };
};