react.js - 为什么使用了 react-router-redux 之后不断执行组件的render方法

问题描述

问 题

class ActivityList extends Component {
        console.log('hello')
        return (<div></div>)
}

之后会在控制台不断的打印 hello

入口文件

const store = createStore()
const history = syncHistoryWithStore(hashHistory, store)

render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={ActivityListContainer}>
                <IndexRoute component={ActivityListContainer} />
                <Route path="a" component={ActivityListContainer} />
                <Route path="b" component={ActivityListContainer} />
                <Route path="c" component={ActivityListContainer} />
                <Redirect from='*' to='/' />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
)

reducer

const rootReducer = combineReducers({
  payload:listReducer,
  optionStatus: optionAction,
  routing:routerReducer
})

解决方案

在 @eyesofkids 帮助下，这个问题已经解决，由于我在 组件return 之前 无条件的调用了 routerOption(location.pathname)方法，在这个方法里面会dispach(action) 所以每次进入render方法的时候都会去执行该方法， 所以会不断的发送 action 导致组件不断得更新。

一般情况下我们的包含了dispatch调用的方法是在 用户操作事件之后来调用的，例如在单击事件中调用，此时是不会无限的执行下去的，但是由于我这里牵扯到了首屏数据自动填充，这个动作是在用户操作之前完成的，所以必须要写到return之前，我整体是通过路由变化来控制的

这篇关于react.js - 为什么使用了 react-router-redux 之后不断执行组件的render方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！