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

Question

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

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

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

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

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

我做了一个小例子来说明反应行为，使用简单的反应（只是为了确保我没有被 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

Answer 1

TL DR - 你的“解决方法”对我来说是正确的

当你最初渲染组件时，componentDidMount 被调用，当你改变 hash 属性时，componentDidUpdate 被调用。它仍然是同一个组件，只是一个特定的 prop 改变了值。在您的情况下，您有特定于您的应用程序的逻辑（在哈希更改时运行 AJAX 调用）。 React 并不知道 hash prop 是特殊的，你可以通过在componentDidMount 中添加逻辑来使其特殊。所以我相信你对 React 文档有很好的解释，这种实现目标的方式是完全有效的。

Answer 2

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

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

这将在每次哈希真正更改时更新组件。

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