应用场景:

1
2
3
4
5
6
7
8
9
10
// route.js
<Router>
<Switch>
<Route path="/" component={NewsList} />
<Route path="/a" component={NewsList} />
<Route path="/b" component={NewsList} />
<Route path="/c" component={NewsList} />
<Route path="/d" component={NewsList} />
</Switch>
</Router>

1
2
3
4
5
6
7
8
9
10
class NewsList extends Component {
componentWillMount () {
const type = this.props.location.pathname.replace('/', '') || 'top'
this.props.dispatch(fetchListData(type))
}

render () {
...
}
}

分析:
React组件的生命周期钩子。第一次加载时:

1
2
3
4
"constructor"
"componentWillMount"
"render"
"componentDidMount"

当组件的props发生改变时,组件更新,会调用如下的生命周期钩子

1
2
3
4
5
"componentWillReceiveProps"
"shouldComponentUpdate"
"componentWillUpdate"
"render"
"componentDidUpdate"

当路由变化时,即组件的props发生了变化,会调用componentWillReceiveProps等生命周期钩子

怎么做呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class NewsList extends Component {
componentDidMount () {
this.fetchData(this.props.location);
}

fetchData(location) {
const type = location.pathname.replace('/', '') || 'top'
this.props.dispatch(fetchListData(type))
}

componentWillReceiveProps(nextProps) {
if (nextProps.location.pathname != this.props.location.pathname) {
this.fetchData(nextProps.location);
}
}

render () {
...
}
}

转载请保持原始链接

原始链接: https://ru23.com/note/85383de6.html