我有一个动作和减速器,可以更新全局计数器。快速执行此操作。减速器为每个操作返回状态的新副本。减速器看起来像:
import { handleActions } from 'redux-actions'; import { sceneTick } from './actions'; export default (state, action) => handleActions({ [sceneTick]: (state, action) => { return { ...state, loop: action.payload, } },
我在各种React组件上使用react- redux的connect方法。并非所有组件都关心此循环计数器。因为我在每个刻度上都在化简器中返回新状态,所以所有订阅的组件connect都将mapDispatchToProps执行,这会导致不必要的React渲染调用。
react- redux
connect
mapDispatchToProps
这些组件之一如下所示:
const mapStateToProps = (state, props) => { return { viewport: state.viewport, assets: state.assets, }; }; export default connect(mapStateToProps, {})(Component)
即使此组件不依赖state.loop它,也会触发重新渲染。这会导致重新渲染,过度渲染,多次渲染,不必要的渲染,性能问题以及不需要重新渲染的组件中的意外行为。
state.loop
更新 我还应该补充一点,我 没有combineReducers在这里使用,并且所有的reducer都被应用到了全状态。不确定是否相关。
combineReducers
Redux connect接受一个areStatesEqual功能选项,可用于将相等性检查范围缩小到特定的状态分支。
areStatesEqual
export default connect( {}, {}, null, { areStatesEqual: (next, prev) => { return ( prev.branch === next.branch ); } } )(Component);