2016-06-01 5 views
2

反応ドキュメントによると:http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmountコンポーネントを表示するときに発行されるべきAJAX呼び出しのためにcomponentDidMountを使用することが推奨されます。同一のReactコンポーネントの異なるインスタンスを切り替えるときにcomponentDidMountを利用する

ただし、異なるコンポーネントを持つ同じコンポーネントのインスタンスを別のコンポーネントに切り替えると、componentDidMountは最初のコンポーネントに対してのみ呼び出されます。だから、このような状況で何をすべきか?

現在、私はcomponentDidMountで私のAJAX呼び出しを行い、componentDidUpdateで私は新しい "インスタンス"になっているかどうかをチェックするために古いものと新しいものを比較し、そうであれば私の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に行くとき、私は 'componentDidMount#/ bar'を取得し、#/ bazに行くと 'componentDidUpdate#/ baz'を取得します。

この未回答の質問は同じ問題の具体的なケースであるように私には思える:React does not know when i render the same component

+1

あなたは、あなたのコンポーネントがこの新しいラッパーコンポーネントを拡張し、しかし、データの本のフロー(およびそれ以上)の複雑さを扱ういくつかのフラックスアーキテクチャを使用することを検討するために行い、その後React.Component拡張親コンポーネントを作成し、することができます[Redux](http://redux.js.org/)などです。実際に具体的には、 – Syberic

答えて

2

あなたはハッシュごとに固有の値でkeyプロパティを追加することができます。

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

これは、コンポーネントを更新しますハッシュが実際に変更されるたびに

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

+0

https://facebook.github.io/react/docs/multiple-components.html#dynamic-childrenもし私がそれを正しく理解すれば。右? –

+0

@OleLondはい。私はリンクを修正しました。 –

関連する問題