Nhận được sự khác biệt về sự tái hiện trong React

Question

Có cách nào để có được sự khác biệt mà React đang nhận được của DOM/Thành phần không? Tôi có thể tưởng tượng cố gắng lưu trữ các thay đổi khi chúng xảy ra để người dùng có thể 'hoàn tác' các thay đổi [và cá nhân quan tâm đến sự sẵn có của diff khác nằm bên dưới phần đầu (có lẽ nó sẽ có các thành phần đã thay đổi?)].

EDIT: Tính năng hoàn tác chỉ là một ví dụ. Tôi chỉ quan tâm đến việc liệu ở trên có thể trích xuất từ ​​React, vì nó được cho là đang làm một sự khác biệt của cây mới và cũ.

Answer 1

Tôi đang cố gắng để lưu trữ thay đổi khi chúng xảy ra vì vậy người dùng có thể 'hoàn tác' những thay đổi

đề xuất của tôi làm thế nào để thực hiện điều này:

Phản ứng làm cho kết quả nên chỉ dựa trên tiểu bang. Nếu bạn đưa ra trạng thái giống hệt nhau hai lần, thì DOM phải giống hệt nhau. Có thể các thành phần con phải là phi trạng thái.

componentWillUpdate phương pháp được chạy sau khi thay đổi về đạo cụ và tiểu bang.

Bạn có thể sao chép và lưu trạng thái sau bất kỳ thay đổi trạng thái nào.

Và nếu người dùng 'hoàn tác' thay đổi thì hãy đặt trạng thái đã lưu cũ làm trạng thái hiện tại.

Và DOM phải giống hệt với trạng thái trước đó.

Answer 2

Sử dụng Redux kết hợp với redux-undo nếu bạn muốn chức năng hoàn tác/làm lại.

Answer 3

Để trả lời câu hỏi của bạn: lẽ, nhưng bạn không nên làm điều đó như thế

Hãy tưởng tượng nếu bạn có diff của DOM, sau đó bạn sẽ phải phân tích cú pháp DOM và tìm ra thay đổi dom ánh xạ đến các phần khác nhau của đạo cụ và nhà nước.

Thats lộn xộn.

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

Bạn về cơ bản phải giữ con trỏ đến dữ liệu hiện tại và danh sách thay đổi, nơi mỗi thay đổi có thể dễ dàng được hoàn nguyên về.