在同一个React组件的不同实例之间切换时使用componentDidMount

Question

According to the react documentation: http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount we are adviced use componentDidMount for AJAX call that should be issued when a component is brought into view.

However, when switching between to instances of the same component with different props, componentDidMount is only called for the first component. So what are we supposed to do in this situation?

Currently I have the following workaround: In componentDidMount i do my AJAX call and In componentDidUpdate I compare old and new props to check if I am on a new "instance", and if so I do my AJAX call. But that seems exactly like a workaround. So my question is: is this really the way to do it?

I am aware that I could wrap my component in different empty components to solve my problem. However, this is not possible because we are building a data driven application that uses configurable components and it makes sense to use the same component with different configurations - which is where I'm running into problems.

I am aware that we are actually talking about react elements and not instances as such - witch I guess is part of the problem. Probably I have different react elements utilizing the same instance.

I have made a tiny example to illustrate the react behavior, using plain react (just to make sure I wasn't tricked by react-router or redux and what else we are using the the real app):

class Foo extends React.Component {
    componentDidMount() {
        console.log('componentDidMount ' + this.props.foo);
    }

    componentDidUpdate() {
        console.log('componentDidUpdate ' + this.props.foo);
    }

    render() {
        return <div>Route is {this.props.foo}</div>;
    }
}

function navigated() {
    ReactDOM.render(
        <Foo foo={window.location.hash} />, 
        document.getElementById('app')
    );
}

window.addEventListener('hashchange', navigated, false);
navigated();

Initially when I go to #/bar I get 'componentDidMount #/bar' and when I go to #/baz i get 'componentDidUpdate #/baz'.

I seems like this unanswered question is a specific case of the same issue: React does not know when i render the same component

Answer 1

You can add the key property with unique value for each of hashes:

ReactDOM.render(
    <Component hash={hash} key={hash} />, domNode
);

This will update the component every time when the hash is really changed.

https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Answer 2

TL DR - your 'workaround' looks correct to me

When you initially render the component componentDidMount is called, when you change the hash prop componentDidUpdate is called. It is still the same component, it is just that a specific prop has changed value. In your case, you have logic (running an AJAX call when hash changes) that is specific to your application. React does not known that the hash prop is special, you make is special by adding the logic in componentDidMount . So I believe you have a good interpretation of the React docs and this way of achieving your goal is perfectly valid.