Montagekomponenten in React Native

Question

Ich bin relativ neu in JS und RN und ich arbeite derzeit mit einer App, wo ich auf einige wichtige Probleme in Bezug auf meine Handhabung von Komponenten gestoßen bin.

Ich habe versucht, durch die folgende Anleitung zu laufen: https://facebook.github.io/react/docs/component-specs.html sowie https://facebook.github.io/react/docs/advanced-performance.html aber das letztere fliegt ein bisschen über meinen Kopf.

Allerdings, wie ich verstehe: componentWillMount feuert, was Stück Code, der innerhalb ist, bevor die Render-Funktion ausgeführt wird, und löscht was immer es ist zu vergessen. Oder wie kann ich angeben?

Mein spezifisches Problem liegt in der Tatsache, dass ich drei Funktionen habe, eine Haupt- und innerhalb der Haupt Ich habe CompOne und CompTwo, wobei die beiden letzteren in der Hauptkomponente aufgerufen werden, wenn Sie auf einen bestimmten Sub-Navigator drücken. Dies bedeutet, dass ich drei Instanzen von getInitialState habe, während compOne und compTwo im Grunde die gleichen Dinge definieren, aber verschiedene Teile des Servers aufrufen (daher ist der Code sehr ähnlich).

Auch dieses Problem taucht manchmal wieder auf, wenn ich zwischen verschiedenen Frames gehe und wieder zu meinem Home-Bildschirm zurückkehre.

In meinem Home-Bildschirm habe ich es so:

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(); 
    }, 

Wo ich this.state.friedFeed passieren ein this.props.friendData in einem von zwei Komponenten und umgekehrt für die localFeed zu sein.

Kommissionierung es in meinem compone up:

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} /> 
    ) 
    } 
    }, 

durch die renderRow Funktion usw. Gefolgt und die compTwo Funktion im wesentlichen identisch ist.

Aber meine Frage ist: Wie soll ich gehen, um die Komponente unmounten? Wenn es das ist was ich will? Ein weiteres häufig, aber nicht konsequent auftretendes Problem ist der Fehler null is not an object (evaluating 'prevComponentInstance._currentElement' mit Bezug auf die _updateRenderedComponent daher meine Überzeugung, dass ich eine andere Methode beim Montieren, Unmounten und Aktualisieren meiner Komponenten verwenden sollte, oder irre ich mich?

Nach etwas browsen, fügen Sie noch eine Frage dazu, die die Hauptfrage sein könnte ... Ist es sogar möglich, dass eine RN App mehrere Listenansichten und mehrere Fetcher in verschiedenen Szenen bearbeitet?

Answer 1

In den meisten Situationen müssen Sie sich nicht darum kümmern, die Komponenten zu entfernen. Wenn eine React-Komponente nicht mehr benötigt wird, vergisst React im Allgemeinen nur noch, einschließlich Inhalt, Requisiten, Status usw.ist normalerweise für Dinge reserviert, die sich in einem globalen Status befinden, der nach dem Vergessen der Komponente zu Problemen führen würde wenn sie noch existierten.

Die Dokumentation auf der Seite, die Sie verlinkt haben, nennt Reinigungs-Timer als Beispiel. Wenn Sie in Javascript einen Timer über setTimeout()/setInterval() festlegen, sind diese Timer im globalen Bereich vorhanden. Stellen Sie sich nun vor, Sie hätten eine Komponente, die einen Timer zum Ändern eines Elementes auf dem Bildschirm oder möglicherweise eine Interaktion mit einer Komponente, sagen wir mal 30 Sekunden, in der Zukunft setzt. Aber dann navigiert der Benutzer weg von dem Bildschirm/der Komponente, und weil es nicht mehr auf dem Bildschirm ist, vergisst React darüber. Dieser Zeitgeber wird jedoch weiterhin ausgeführt und kann zu Fehlern führen, wenn er ausgelöst wird und er nicht mit dieser jetzt gelöschten Komponente interagieren kann. gibt Ihnen eine Chance, diesen Timer zu löschen, also komische Nebenwirkungen treten nicht auf, wenn er feuert, um mit Elementen zu interagieren, die nicht mehr existieren.

In Ihrem Fall haben Sie wahrscheinlich nichts, was Aufräumarbeiten benötigt, soweit ich das beurteilen kann. Vielleicht möchten Sie Ihre Frage klären, weil Sie nicht sagen, was das Problem Verhalten ist, dass Sie sehen, aber beachten Sie auch, dass getInitialState nur beim ersten Mal aufgerufen wird, eine Komponente erstellt wird, und nur wenn nicht aufgerufen wird Requisiten ändern sich. Wenn sich die friendData ändert, aber die Komponente auf dem Bildschirm bleibt, müssen Sie Ihre ds über eine componentWillReceiveProps aktualisieren.

Zu Ihrer letzten Frage, ja, es ist sicherlich möglich, dass React mehrere ListViews/Fetches/etc.