时间戳

首页 > 解决方案 > React Redux mapStateToProps 正在重新渲染

javascript - React Redux mapStateToProps 正在重新渲染

问题描述

我遇到了一个问题，我的组件正在重新渲染，但它不应该（我总是发送相同的数据集）。后来我发现如果我的mapStateToProps看起来像这样：

function mapStateToProps({reducerContent},ownProps) {
    return {
        ...reducerContent
    }
}

它不会重新渲染（如果我发送相同的数据集）但这种形式的mapStateToProps将重新渲染我的组件：

function mapStateToProps({reducerContent},ownProps) {
    return {
        data: {
            ...reducerContent
        }
    }
}

在下面你可以找到我的减速器和组件。减速器：（action.data 是浅对象）：

const reducerContent = (state = {}, action) => {
    switch ( action.type ){
        case types.GET_CONTENT:
            return {
                ...state,
                ...action.data
            };

        default:
            return state;
    }
};

组件（将进一步开发）：

import React, {Component}   from 'react';
import {connect}            from 'react-redux';

class Content extends Component {
    render() {
        return {this.props.content}
    }
}

function mapStateToProps({reducerContent},ownProps) {
    return {
        ...reducerContent
    }
}

export default connect(mapStateToProps,null)(Content)

标签： javascriptreactjsreact-reduxrerender

解决方案

connect被实现为PureComponentie，它对所提供的值进行浅层比较，mapStateToProps并决定是否重新渲染。

现在，当您提供数据时

{
    data: {
        ...reducerContent
    }
}

浅比较失败，因为您克隆了 reducerContainer，因此nextProps.data不等于this.props.data. 为了避免这种情况，您通常会选择memoization. 为此，您可以自己使用reselect或实现一个 memoized 函数

选择你的 mapStateToProps 看起来像

const getReducedDataSelector = createSelector(
   state => state.reducerContent,
   (reducedContent) => ({...reducedContent})
);
function mapStateToProps(state,ownProps) {
    return {
        data: getReducedDataSelector(state, ownProps);
    }
}

在上述情况下，getReducedDataSelector也可以使用自定义记忆方法来实现

推荐阅读