Question

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

但是，当使用不同的道具切换到同一组件的实例时，仅为第一个组件调用componentDidMount。那么在这种情况下我们应该做些什么呢？

目前我有以下解决方法：在componentDidMount中，我执行AJAX调用，在componentDidUpdate中，我比较旧的和新的道具，检查我是否在新的＆＃34;实例＆＃34;，如果是，我做我的AJAX呼叫。但这似乎就像一个解决方法。所以我的问题是：这真的是这样做的吗？

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

我知道我们实际上是在讨论反应元素而不是实例 - 我想这是问题的一部分。可能我使用相同的实例有不同的反应元素。

我做了一个很小的例子来说明反应行为，使用简单的反应（只是为了确保我没有被反应路由器或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时，我得到了＆＃39; componentDidMount＃/ bar＆＃39;当我去＃/ baz时，我得到了＆component; DidUpdate＃/ baz＆＃39;。

我认为这个未回答的问题是同一问题的具体案例：React does not know when i render the same component

Answer 1

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

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

每次真正更改哈希值时，都会更新组件。

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

Answer 2

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

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

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

2 个答案: