在同一个React组件的不同实例之间切换时使用componentDidMount [英] Utilizing componentDidMount when switching between different instances of the same React component
问题描述
根据反应文件： http：// facebook .github.io / react / docs / component-specs.html #mount-componentdidmount 我们建议使用componentDidMount进行AJAX调用，当组件进入视图时应该发出。
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.
但是，当使用不同的道具切换到同一组件的实例时，仅为第一个组件调用componentDidMount。那么我们应该在这种情况下做些什么？
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?
目前我有以下解决方法：在componentDidMount中我做我的AJAX调用和在componentDidUpdate我比较新旧道具检查我是否在一个新的实例，如果是，我做我的AJAX调用。但这似乎就像一个解决方法。所以我的问题是：这真的是这样做吗？
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.
我做了一个很小的例子来说明反应行为，使用简单的反应（只是为了确保我不是反应路由器或redux以及我们正在使用的真实应用程序欺骗了：
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();
最初当我去＃/ bar时，我得到'componentDidMount＃/ bar'，当我去＃/ baz我得到'componentDidUpdate＃/ baz'。
Initially when I go to #/bar I get 'componentDidMount #/bar' and when I go to #/baz i get 'componentDidUpdate #/baz'.
我似乎这个未回答的问题是同一问题的具体情况：React不知道我何时呈现相同的组件
I seems like this unanswered question is a specific case of the same issue: React does not know when i render the same component
推荐答案
您可以为每个哈希值添加具有唯一值的键属性：
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
这篇关于在同一个React组件的不同实例之间切换时使用componentDidMount的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
