FITURE

If you can fight, fight.

首页 >> 分享>>Javascript>>React Component Lifecycle with react-router

React Component Lifecycle with react-router

Posted by fiture / 2015年09月13日 / Javascript」「分享

It’s important to understand which lifecycle hooks are going to be called on your route components to implement lots of different functionality in your app. The most common thing is fetching data.

There is no difference in the lifecycle of a component in the router as just React itself. Let’s peel away the idea of routes, and just think about the components being rendered at different urls.

Consider this route config:

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="invoices/:invoiceId" component={Invoice}/>
  <Route path="accounts/:accountId" component={Account}/>
</Route>

Lifecycle hooks when routing

  1. Lets say the user enters the app at /.
    Component Lifecycle Hooks called
    App componentDidMount
    Home componentDidMount
    Invoice N/A
    Account N/A
  2. Now they navigate from / to /invoice/123
    Component Lifecycle Hooks called
    App componentWillReceiveProps, componentDidUpdate
    Home componentWillUnmount
    Invoice componentDidMount
    Account N/A
    • App gets componentWillReceiveProps and componentDidUpdate because it
      stayed rendered but just received new props from the router (like:
      children, params, location, etc.)
    • Home is no longer rendered, so it gets unmounted.
    • Invoice is mounted for the first time.
  3. Now they navigate from /invoice/123 to /invoice/789
    Component Lifecycle Hooks called
    App componentWillReceiveProps, componentDidUpdate
    Home N/A
    Invoice componentWillReceiveProps, componentDidUpdate
    Account N/A

    All the components that were mounted before, are still mounted, they
    just receive new props from the router.

  4. Now they navigate from /invoice/789 to /accounts/123
    Component Lifecycle Hooks called
    App componentWillReceiveProps, componentDidUpdate
    Home N/A
    Invoice componentWillUnmount
    Account componentDidMount

Fetching Data

While there are other ways to fetch data with the router, the simplest way is to simply use the lifecycle hooks of your components and keep that data in state. Now that we understand the lifecycle of components when changing routes, we can implement simple data fetching inside of
Invoice.

let Invoice = React.createClass({

  getInitialState () {
    return {
      invoice: null
    }
  },

  componentDidMount () {
    // fetch data initially in scenario 2 from above
    this.fetchInvoice()
  },

  componentDidUpdate (prevProps) {
    // respond to parameter change in scenario 3
    let oldId = prevProps.params.invoiceId
    let newId = this.props.params.invoiceId
    if (newId !== oldId)
      this.fetchInvoice()
  },

  componentWillUnmount () {
    // allows us to ignore an inflight request in scenario 4
    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 <InvoiceView invoice={this.state.invoice}/>
  }

})

https://github.com/rackt/react-router/blob/master/docs/advanced/ComponentLifecycle.md

发表评论

电子邮件地址不会被公开。 必填项已用*标注