2016-05-19 9 views
1

私はJSとRNには比較的新しいですし、現在コンポーネントのハンドリングに関するいくつかの大きな問題に取り組んでいるアプリケーションで作業しています。部品をリアクトネイティブで実装する

私は以下のガイド:https://facebook.github.io/react/docs/component-specs.htmlhttps://facebook.github.io/react/docs/advanced-performance.htmlを実行しようとしましたが、後者は私の頭の上に少し飛んでいます。

ただし、私が理解しているように:componentWillMountは、レンダリング機能が実行される前にコードが何であっても起動し、componentWillUnmountは忘れてしまったものを消去します。またはどのように指定することができますか?

私の具体的な問題は、私がcompOneとcompTwoという3つの機能を持っていることにあります。私はcompOneとcompTwoを持っていますが、特定のサブナビゲータを押すとメインコンポーネントで呼び出されます。つまり、私はgetInitialStateという3つのインスタンスを持っていますが、compOneとcompTwoは基本的に同じものを定義していますが、サーバーのさまざまな部分を呼び出す(したがってコードは非常に同じです)。

また、この問題は、異なるフレーム間を移動して再びホーム画面に戻るときに発生します。私のホーム画面で

私はこのようにそれを持っている:私は2つのコンポーネントとlocalFeedため、その逆のいずれかでthis.props.friendDataするthis.state.friedFeedを渡す

var Home = React.createClass({ 

    getInitialState: function() {  
    return { 
     componentSelected: 'One', 
     userName: "Loading...", 
     friendFeed: 'Loading...', 
     loaded: false, 
     loadedlocal: false, 
    }; 
    }, 
    componentWillMount: function() { 
    Method.getFriendFeed(this.props.tokenSupreme) 
    .then((res) => this.setState({ 
     friendFeed: JSON.parse(res).friendPosts, 
     loaded: true, 
    })) 
    .catch((error) => console.log(error)) 
    .done(); 

    Method.getLocalFeed(this.props.tokenSupreme,) 
    .then((res) => this.setState({ 
     localFeed: JSON.parse(res).friendPosts, 
     loadedlocal: true, 
    })) 
    .catch((error) => console.log(error)) 
    .done(); 
    }, 

。私CompOneでそれを拾い

:でrenderRow機能などとcompTwo機能続く

var ComponentOne = React.createClass({ 
    getInitialState: function() { 
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    return { 
     dataSource: ds.cloneWithRows(this.props.friendData), 
    }; 
    }, 

    render: function() { 
    if (!this.props.loaded) { 
     return this.renderLoadingView(); 
    } else { 
    return (
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow} 
      style={styles.card} /> 
    ) 
    } 
    }, 

は基本的に同じです。

しかし、私の質問です:コンポーネントをアンマウントするにはどうすればいいですか?もしそれが私が欲しいものであれば?もう1つ頻繁に起こっている問題ではなく、のエラーは_updateRenderedComponentを参照していますので、コンポーネントをマウント、アンマウント、アップデートする際に別の方法を取らなければならないと思っていますか、間違っていますか?

いくつかのブラウジングがうまくいかなかった後に、これが主な質問かもしれない別の質問を追加してください... RNアプリが複数のシーンビューで複数のリストビューと複数のフェッチャーを処理することは可能ですか?

答えて

2

ほとんどの場合、コンポーネントをアンマウントすることを心配する必要はありません。 Reactコンポーネントがもはや必要なくなったときには、Reactは一般的にその内容、小道具、状態などを忘れてしまうだけです。componentWillUnmountは一般的にグローバルな状態にあるもののために予約されています。まだ存在していれば

リンク先のページのドキュメントには、タイマーのクリーンアップの例が記載されています。 Javascriptでは、setTimeout()/setInterval()でタイマーを設定すると、これらのタイマーはグローバルスペースに存在します。ここで、画面上の一部の要素を変更するためのタイマーを設定したり、コンポーネントと対話しようとする可能性のあるコンポーネントがあるとします(将来30秒間としましょう)。しかし、ユーザーはスクリーン/コンポーネントから離れてナビゲートします。画面上には表示されなくなるため、Reactはそれを忘れてしまいます。ただし、そのタイマーはまだ実行されており、起動するとエラーが発生する可能性があり、その時点で廃棄されたコンポーネントと対話できません。 componentWillUnmountは、タイマーをクリアする機会を与え、もはや存在しなくなった要素と対話するために発砲したときに奇妙な副作用が発生しないようにします。

あなたのケースでは、私が知る限り、クリーンアップが必要なものはおそらくありません。 が表示されているというトラブル動作が何であるかについては言及していませんが、getInitialStateは初めてコンポーネントが作成されたときにのみ呼び出され、小道具が変わる。したがって、friendDataが変更されていてもコンポーネントが画面に残っている場合は、componentWillReceivePropsdsを更新する必要があります。

最後に、Reactが複数のListView/fetches /などを処理することは確かに可能です。

関連する問題