根据react文档：http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount我们建议使用componentDidMount进行AJAX调用,该调用应在组件出现时发出.

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

当前,我有以下解决方法：在componentDidMount中,我进行AJAX调用；在componentDidUpdate中,我对新旧道具进行比较,以检查我是否在新的“实例”上,如果是,则进行AJAX调用.但这似乎完全是一种解决方法.所以我的问题是：这真的是这样做的方法吗？

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

我知道我们实际上是在谈论反应元素,而不是这样的实例-我想这是问题的一部分.可能我利用同一实例具有不同的反应元素.

我做了一个小例子来说明使用纯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 does not know when i render the same component

解决方法:

您可以为每个哈希添加具有唯一值的key属性：

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

每次真正更改哈希值时,都会更新组件.

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