小编典典

如何限制react-redux连接更新重新渲染到特定状态分支?

reactjs

我有一个动作和减速器,可以更新全局计数器。快速执行此操作。减速器为每个操作返回状态的新副本。减速器看起来像:

import { handleActions } from 'redux-actions';
import { sceneTick } from './actions';

export default (state, action) => handleActions({
  [sceneTick]: (state, action) => {
    return {
      ...state,
      loop: action.payload,
    }
  },

我在各种React组件上使用react- reduxconnect方法。并非所有组件都关心此循环计数器。因为我在每个刻度上都在化简器中返回新状态,所以所有订阅的组件connect都将mapDispatchToProps执行,这会导致不必要的React渲染调用。

这些组件之一如下所示:

const mapStateToProps = (state, props) => {
  return {
    viewport: state.viewport,
    assets: state.assets,
  };
};


export default connect(mapStateToProps, {})(Component)

即使此组件不依赖state.loop它,也会触发重新渲染。这会导致重新渲染,过度渲染,多次渲染,不必要的渲染,性能问题以及不需要重新渲染的组件中的意外行为。

更新 我还应该补充一点,我 没有combineReducers在这里使用,并且所有的reducer都被应用到了全状态。不确定是否相关。


阅读 245

收藏
2020-07-22

共1个答案

小编典典

Redux connect接受一个areStatesEqual功能选项,可用于将相等性检查范围缩小到特定的状态分支。

export default connect(
  {},
  {},
  null,
  {
    areStatesEqual: (next, prev) => {
      return (
        prev.branch === next.branch
      );
    }
  }
)(Component);
2020-07-22