用于更新Immutable React状态的三种方法中的哪一种?

时间:2018-01-16 03:26:05

标签: javascript reactjs immutability

我使用的是Immutable JS和React。我想知道在这些个人风格选择下更新州立商店的这三种方法是否有很大的不同:

// Method 1
this.setState(({data}) => ({
  data: data.update('count', v => v + 1)
}));

// Method 2
this.setState(prevState => ({
  data: prevState.data.update('count', v => v + 1)
}));

// Method 3
this.setState({ 
  data: this.state.data.update('count', v => v + 1)
});

方法1似乎使用先前状态的解构,方法2类似,只是它选择退出解构。方法3是最不同的,它引用当前状态而不是先前状态,但它似乎仍然有效。 (它会永远吗?)

我个人更喜欢方法3,因为它是最少量的代码,但是我看到了existing Facebook example使用方法1.它是否有很大的不同?

1 个答案:

答案 0 :(得分:0)

1和2之间的唯一区别在于,在1中,您将状态解构为变量。 #3改变了你访问现有状态的方式(this.state vs传递给函数)。选项1必须编译或填充,但是比选项2更清晰的代码.3个选项中的任何一个都没有明显的性能差异,但#3可能会快得多,因为它只是将对象传递给更新而不是运行传递要更新的对象的函数。 1和1的好处2如果你想从其他地方传递函数,你可以