Question

我遇到了一个问题，即我的组件正在重新渲染，而不应该重新渲染（我一直在发送相同的数据集）。后来我发现，如果我的 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)

Answer 1

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

现在当您提供类似数据

时

{
    data: {
        ...reducerContent
    }
}

浅表比较失败，因为您克隆了reducerContainer，因此nextProps.data不等于this.props.data。为了避免这种情况，通常选择memoization。为此，您可以使用reselect或自己实现一个已记忆的功能

选择您的mapStateToProps看起来像

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

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

React Redux mapStateToProps正在重新渲染

1 个答案: