最近打算在一个新项目中采用:redux、reactjs、redux-react、redux-simple-router。 边学边用,踩了许多坑,这个坑爬不出来了,特地请教各位大神,问题描述入下:
- 路由配置类似这样:
<Route path='person/:id' component={PersonDetail} />
- PersonDetail是一个详情页面,我期望根据路由中的id动态获取详情, PersonDetail的代码大致如下所示:
我在
componentDidMount
函数里dispatch
一个异步获取数据的action
,在相应的reducer
里将结果放到state.person
里。
var PersonDetail = React.createClass({
componentDidMount: function () {
this.props.dispatch(actions.fetchPersonDetail(this.props.params.id));
},
render: function() {
return (
<div>{this.props.person.name}</div>
);
}
});
首次进入页面时跟我期望的一样:
1)执行 componentDidMount
2)dispatch
异步Action
3)reducer
更新state
4) 渲染PersonDetail
,state.person作为它的属性
但是当我切换路由时,例如:person/123 切换到 person/456
React只会调用 render,不会再执行 componentDidMount
了。
原因我是知道的,React只有在初始化渲染的时候,调用一次componentDidMount
函数。
但是我这种情况下,有什么好的解决方案呢?
我期望是在各个组件内(如上面说的PersonDetail
),自己感知路由的变化,让各个模块相对独立一些。
明白了:
https://github.com/rackt/react-router/blob/latest/docs/guides/advanced/ComponentLifecycle.md
最开始也想到了在其他生命周期函数里来触发,只是没有注意到componentDidUpdate
还可以获取上一次的props,所以搞出了个死循环。
第一次如此大规模更新前端技术栈,坑太多,慢慢踩……
@sarike 你好你上面提供的链接打不开了,不知道能否再提供一个呢,非常感谢。