Question

有没有办法获得React获取DOM / Components的差异？我可以设想在发生变化时尝试存储更改，以便用户可以“撤消”更改[并且我个人对重新渲染的差异的可用性感兴趣（也许它会使组件发生变化？）]。 / p>

编辑：撤消功能只是一个例子。我只是对上面是否有可能从React中提取感兴趣，因为它应该是新旧树的差异。

Answer 1

我正在尝试将更改存储起来，以便用户可以“撤消”更改

我的主张如何实现这个目标：

React渲染结果应仅基于状态。如果给出两次相同的状态，那么DOM应该是相同的。儿童组件可能应该是无国籍的。

在道具和状态发生变化后运行

componentWillUpdate方法。

您可以在状态更改后复制并保存状态。

如果用户'撤消'更改，则将旧保存状态设置为当前状态。

DOM应该与以前的状态相同。

Answer 2

如果您想要撤消/重做功能，请将Redux与redux-undo结合使用。

Answer 3

要回答您的问题：可能，但您不应该这样做

想象一下，如果你有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>
  }
})

您基本上必须保留指向当前数据的指针，以及更改列表，其中每个更改都可以轻松恢复为。

在React中重新渲染时获得差异

3 个答案: