Получите разницу на reerender в React

Есть ли способ получить diff, который React получает от DOM/Components? Я могу себе представить, как пытаться сохранить изменения по мере их появления, поэтому пользователь может "отменить" изменения [и лично заинтересован в доступности diff, который лежит в основе rerender (возможно, у него были бы измененные компоненты?)].

EDIT: функция отмены была всего лишь примером. Меня просто интересует, можно ли извлечь из React из вышеизложенного, поскольку он предположительно выполняет различие нового и старого дерева.

Ответ 1

Я пытаюсь сохранить изменения по мере их появления, поэтому пользователь может "отменить" изменения

Мое предложение, как это сделать:

Реальный результат рендеринга должен основываться только на состояниях. Если вы даете два раза идентичное состояние, то DOM должен быть идентичным. Возможно, дочерние компоненты должны быть без гражданства.

componentWillUpdate метод запускается после изменений в реквизитах и состояниях.

Вы можете скопировать и сохранить состояние после любого изменения состояния.

И если пользователь "отменить" изменится, установите старое сохраненное состояние как текущее состояние.

И DOM должен быть идентичен предыдущему состоянию.

Ответ 2

Используйте Redux в сочетании с redux-undo если вы хотите использовать функции отмены/повтора.

Ответ 3

Чтобы ответить на ваш вопрос: возможно, , но вы не должны этого делать

Представьте себе, если бы у вас был diff DOM, тогда вам нужно было бы проанализировать DOM и выяснить, какие изменения в dom изменяются на разные части реквизита и состояния.

Это беспорядочно.

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

В основном вы должны держать указатель на текущие данные и список изменений, где каждое изменение может быть легко возвращено.