React üzerinde fark yaratın React

Question

React'ın DOM/Bileşenlerini aldığını fark etmenin bir yolu var mı? Değişiklikleri, kullanıcının değişiklikleri geri alabilmesi için saklı tutmaya çalışacağımı hayal edebilirim [ve kişisel olarak, rehinenin altında yatan farkın (belki de değişmiş olan bileşenlere sahip olacak mı?)] Ilgilenmesiyle ilgileniyorum.

DÜZENLEME: Geri alma özelliği sadece bir örnekti. Sadece yeni ve eski bir ağaç farklılığı yaptığı için yukarıdakilerin React'tan çıkarıp alınamayacağıyla ilgileniyorum.

Answer 1

Ben bu kadar kullanıcı değişiklikleri 'geri al' olabilir gerçekleşmesi değişiklikleri saklamak için çalışıyorum

Bunu gerçekleştirmek için nasıl Teklifim:

sonucu kılmak tepki sadece dayanmalıdır devletler. İki kez aynı durumu verirseniz, DOM aynı olmalıdır. Muhtemelen çocuk bileşenleri vatansız olmalı.

componentWillUpdate yöntem sahne ve eyaletlerde değişikliklerden sonra çalıştırılır.

Herhangi bir durum değişikliğinden sonra durumu kopyalayıp kaydedebilirsiniz.

Ve kullanıcı eğer

değişiklikler o anda geçerli devlet olarak eski kaydedilen durumuna set 'geri al'.

Ve DOM, önceki durumla aynı olmalıdır. redux-undo birlikte

Answer 2

Kullanım Redux sen/yeniden geri alma işlevi istiyorum.

Answer 3

sorunuza cevap için: DOM diff olsaydı düşünün Muhtemelen, ama bu

gibi yapmak gerekir, o zaman DOM ayrıştırmak ve anlamaya olurdu hangi dom, sahne ve devletin farklı kısımlarına eşlenmiş değişiklikler.

Thats dağınık.

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

Temelde Güncel verilere bir işaretçi tutmak ve her değişiklik kolayca döndürülebilir değişiklikler listesine gerekiyor.