路由的生命周期和Fetch请求的时机

路由组件的生命周期和 React 组件相比并没有什么不同。 所以让我们先忽略路由部分,只考虑在不同 URL 下,这些组件是如何被渲染的。

路由配置如下:


  
  
  

路由切换时,组件生命周期的变化情况

1. 当用户打开应用的 '/' 页面
image.png
2. 当用户从 '/' 跳转到 '/invoice/123'
image.png
  • App 从 router 中接收到新的 props(例如 children、params、location 等数据), 所以 App 触发了 componentWillReceiveProps 和 componentDidUpdate 两个生命周期方法
  • Home 不再被渲染,所以它将被移除
  • Invoice 首次被挂载
3. 当用户从 /invoice/123 跳转到 /invoice/789
image.png

所有的组件之前都已经被挂载, 所以只是从 router 更新了 props.

4. 当从 /invoice/789 跳转到 /accounts/123
image.png
获取数据

虽然还有其他通过 router 获取数据的方法, 但是最简单的方法是通过组件生命周期 Hook 来实现。 在 Invoice 组件里实现一个简单的数据获取功能。

一个单页系统在切换组件时进行fetch请求,我认为最重要的是搞清楚URL变化时,组件的生命周期发生了什么变化,然后在每个组件中通过不同的生命周期函数来进行数据请求。
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 
  }

})

你可能感兴趣的:(路由的生命周期和Fetch请求的时机)