根据react文档：http : //facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount我们被建议使用 componentDidMount 进行 AJAX 调用，当组件进入视图时应发出该调用。

但是，当在具有不同 props 的同一组件的实例之间切换时，仅对第一个组件调用 componentDidMount。那么在这种情况下我们应该怎么做呢？

目前我有以下解决方法：在 componentDidMount 中，我执行我的 AJAX 调用，在 componentDidUpdate 中，我比较新旧props以检查我是否在一个新的“实例”上，如果是，我执行我的 AJAX 调用。但这似乎完全是一种解决方法。所以我的问题是：这真的是这样做的方式吗？

我知道我可以将我的组件包装在不同的空组件中来解决我的问题。但是，这是不可能的，因为我们正在构建一个使用可配置组件的数据驱动应用程序，并且使用具有不同配置的相同组件是有意义的 - 这就是我遇到问题的地方。

我知道我们实际上是在谈论react元素而不是这样的实例 - 我猜是问题的一部分。可能我有使用相同实例的不同react元素。

我做了一个小例子来说明react行为，使用简单的react（只是为了确保我没有被 react-router 或 redux 以及我们正在使用的真实应用程序所欺骗）：

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();

最初，当我去#/bar 时，我得到“componentDidMount #/bar”，当我去#/baz 时，我得到“componentDidUpdate #/baz”。

我似乎这个悬而未决的问题是同一问题的一个具体案例：React 不知道我何时渲染相同的组件