Get diff auf rerender in React

Question

Gibt es eine Möglichkeit, den Unterschied zu bekommen, den React von den DOM/Components bekommt? Ich kann mir vorstellen, Änderungen so zu speichern, wie sie geschehen, damit der Benutzer die Änderungen "rückgängig machen" kann und persönlich an der Verfügbarkeit des diff interessiert ist, das dem render zugrunde liegt (vielleicht würden sich die Komponenten geändert haben?)].

EDIT: Die Undo-Funktion war nur ein Beispiel. Ich bin nur daran interessiert, ob das obige aus React extrahiert werden kann, da es angeblich ein Diff von neuem und altem Baum macht.

Answer 1

Ich versuche, Änderungen zu speichern, wie sie können, damit der Benutzer passieren ‚rückgängig machen‘ die Änderungen

Mein Vorschlag, wie dies zu tun:

Ergebnis Reagieren machen sollte nur auf der Grundlage werden Zustände. Wenn Sie zwei identische Zustände angeben, sollte DOM identisch sein. Möglicherweise sollten Kinderkomponenten zustandslos sein.

componentWillUpdate Methode wird nach Änderungen in Requisiten und Zuständen ausgeführt.

Sie können den Status nach jeder Statusänderung kopieren und speichern.

Und wenn der Benutzer Änderungen rückgängig macht, dann den alten gespeicherten Zustand als aktuellen Status setzen.

Und DOM sollte identisch mit dem vorherigen Zustand sein.

Answer 2

Verwenden Sie Redux in Kombination mit redux-undo, wenn Sie die Funktionalität rückgängig machen/wiederherstellen möchten.

Answer 3

Um Ihre Frage zu beantworten: Wahrscheinlich, aber man sollte es nicht so

Stellen tun, wenn Sie die diff des DOM hatte, dann würden Sie das DOM analysieren müssen und herauszufinden, welche dom ändert sich auf verschiedene Teile von Requisiten und Zustand.

Das ist chaotisch.

var SomeComponent = React.createClass({ 
    onChange: function(newData){ 
    currentState = _.clone(this.state.currentState) 
    previousChanges = this.state.previousChanges.concat([currentState]) 

    this.setState({ 
     currentState: newData, 
     previousChanges: previousChanges 
    }) 
    }, 

    undo: function(){ 
    previousChanges = _.clone(this.state.previousChanges) 
    currentState = previousChanges.pop() // removes last item and returns it 

    this.setState({ 
     currentState: currentState, 
     previousChanges: previousChanges 
    })  
    }, 
    render: function(){ 
    <div> 
     <SomeAwesomeThing 
     currentState={this.state.currentState} 
     onChange={this.onChange} 
     onUndo={this.undo} 
     /> 
    </div> 
    } 
}) 

Sie haben grundsätzlich einen Zeiger auf die aktuellen Daten zu halten, und auf eine Liste von Änderungen, wobei jede Änderung leicht rückgängig gemacht werden kann.