React-Three-Renderer refs nicht aktuell in componentDidUpdate (MVCE enthalten)

8

Ich verwende react-three-renderer ( npm , github ) zum Erstellen einer Szene mit three.js .

Ich habe ein Problem, dass ich zu einem MVCE heruntergekommen bin. Refs werden nicht in der Reihenfolge aktualisiert, die ich von ihnen erwarte. Zuerst, hier ist der Hauptcode, um zu sehen:

%Vor%

Dies macht eine Basisszene mit einer grünen Box, einem Fork des Beispiels auf der GitHub-Landing Page des react-three-renderers. Mit der Schaltfläche oben links wird die Form in der Szene als blauer Kreis angezeigt. Wenn Sie erneut darauf klicken, kehren Sie zum grünen Feld zurück. Ich melde mich bei den Ref Callbacks an und in componentDidUpdate . Hier tritt der Kern des Problems auf, dem ich begegne. Nachdem ich zum ersten Mal auf den Schalter geklickt habe, erwarte ich, dass die Referenz für die Form auf den Kreis zeigt. Aber wie Sie aus der Protokollierung sehen können, zeigt der Verweis in componentDidUpdate immer noch auf das Feld:

  

componentDidUpdate: Die aktive Form ist Box

Nach dem Aufzeichnen von Zeilen werden die ref-Callbacks getroffen

  

box ref null [Reaction ruft null auf dem alten ref auf, um Speicherlecks zu verhindern]

     

Kreis ref [Objekt Objekt]

Sie können Haltepunkte zum Überprüfen und zur Überprüfung einfügen. Ich würde erwarten, dass diese beiden Dinge passieren, bevor wir componentDidUpdate eingeben, aber wie Sie sehen können, geschieht dies in umgekehrter Reihenfolge. Warum ist das? Gibt es ein Grundproblem im react-three-renderer (wenn ja, können Sie das diagnostizieren?), Oder verstehe ich React refs falsch?

Der MVCE ist im Github-Repository verfügbar . Laden Sie es herunter, führen Sie npm install aus und öffnen Sie _dev / public / home.html.

Vielen Dank im Voraus.

    
Scott H 21.09.2016, 21:33
quelle

1 Antwort

2

Ich habe die Quelle im react-three-renderer überprüft. In lib / React3.jsx gibt es ein Rendering in zwei Phasen.

%Vor%

Die _render -Methode ist diejenige, die die Kinder zu laden scheint - die Mesh-Objekte in Three.

%Vor%

Die Rendermethode zeichnet die Zeichenfläche und füllt die untergeordneten Elemente nicht auf oder ruft Drei nicht auf.

%Vor%

Zusammenfassend ist dies die Reihenfolge:

  1. App Component Render wird aufgerufen.
  2. Dies macht den react-three-renderer, der eine Leinwand auszeichnet.
  3. componentDidUpdate der App-Komponente wird aufgerufen.
  4. componentDidUpdate von react-three-renderer wird aufgerufen.
  5. Dies ruft die Methode _render auf.
  6. Die _render-Methode aktualisiert die Zeichenfläche, indem sie props.children (Netzobjekte) an die Three-Bibliothek übergibt.
  7. Wenn die Mesh-Objekte eingebunden sind, werden die entsprechenden Refs aufgerufen.

Dies erklärt, was Sie in den Konsolenanweisungen beobachten.

    
vijayst 24.09.2016, 18:32
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie erstelle ich eine geplante Aufgabe mit der kostenlosen Seite von Heroku?