在开发应用时,理解路由组件的生命周期是非常重要的。 后面我们会以获取数据这个最常见的场景为例,介绍一下路由改变时,路由组件生命周期的变化情况。
路由组件的生命周期和 React 组件相比并没有什么不同。 所以让我们先忽略路由部分,只考虑在不同 URL 下,这些组件是如何被渲染的。
路由配置如下:
<Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="invoices/:invoiceId" component={Invoice}/> <Route path="accounts/:accountId" component={Account}/> </Route>
组件 | 生命周期 |
---|---|
App | componentDidMount |
Home | componentDidMount |
Invoice | N/A |
Account | N/A |
组件 | 生命周期 |
---|---|
App | componentWillReceiveProps,componentDidUpdate |
Home | componentWillUnmount |
Invoice | componentDidMount |
Account | N/A |
组件 | 生命周期 |
---|---|
App | componentWillReceiveProps, componentDidUpdate |
Home | N/A |
Invoice | componentWillReceiveProps, componentDidUpdate |
Account | N/A |
所有的组件之前都已经被挂载, 所以只是从 router 更新了 props.
组件 | 生命周期 |
---|---|
App | componentWillReceiveProps, componentDidUpdate |
Home | N/A |
Invoice | componentWillUnmount |
Account | componentDidMount |
虽然还有其他通过 router 获取数据的方法, 但是最简单的方法是通过组件生命周期 Hook 来实现。 前面我们已经理解了当路由改变时组件生命周期的变化, 我们可以在Invoice组件里实现一个简单的数据获取功能。
let Invoice = React.createClass({ getInitialState () { return { invoice: null } }, componentDidMount () { // 上面的步骤2,在此初始化数据 this.fetchInvoice() }, componentDidUpdate (prevProps) { // 上面步骤3,通过参数更新数据 let oldId = prevProps.params.invoiceId let newId = this.props.params.invoiceId if (newId !== oldId) this.fetchInvoice() }, componentWillUnmount () { // 上面步骤四,在组件移除前忽略正在进行中的请求 this.ignoreLastFetch = true }, fetchInvoice () { let url = `/api/invoices/${this.props.params.invoiceId}` this.request = fetch(url, (err, data) => { if (!this.ignoreLastFetch) this.setState({ invoice: data.invoice }) }) }, render () { return } })<
如对本文有疑问, 点击进行留言回复!!
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
网友评论