React.js中的setState vs replaceState

I am new to React.js Library and I was going over some of the tutorials and I came across:

我是React.js Library的新手，我正在浏览一些教程，我遇到了：

this.setState
this.setState
this.replaceState
this.replaceState

The Description given is not very clear (IMO).

给出的描述不是很清楚（IMO）。

setState is done to 'set' the state of a value, even if its already set 
in the 'getInitialState' function.

Similarly,

同样的，

The replaceState() method is for when you want to clear out the values 
already in state, and add new ones.

I tried this.setState({data: someArray}); followed by this.replaceState({test: someArray}); and then console.logged them and I found that state now had both data and test.

我试过this.setState（{data：someArray}）;然后是this.replaceState（{test：someArray}）;然后console.logged他们，我发现状态现在有数据和测试。

Then, I tried this.setState({data: someArray}); followed by this.setState({test: someArray}); and then console.logged them and I found that state again had both data and test.

然后，我尝试了this.setState（{data：someArray}）;然后是this.setState（{test：someArray}）;然后console.logged他们，我发现状态再次有数据和测试。

So, what exactly is the difference between the two ?

那么，这两者究竟有什么区别？

3 个解决方案

#1

132

With setState the current and previous states are merged. With replaceState, it throws out the current state, and replaces it with only what you provide. Usually setState is used unless you really need to remove keys for some reason; but setting them to false/null is usually a more explicit tactic.

使用setState合并当前和以前的状态。使用replaceState，它会抛出当前状态，并仅使用您提供的内容替换它。通常使用setState，除非您确实需要出于某种原因删除键;但将它们设置为false / null通常是一种更明确的策略。

While it's possible it could change; replaceState currently uses the object passed as the state, i.e. replaceState(x), and once it's set this.state === x. This is a little lighter than setState, so it could be used as an optimization if thousands of components are setting their states frequently.
I asserted this with this test case.

虽然它可能会改变; replaceState当前使用作为状态传递的对象，即replaceState（x），并且一旦设置this.state === x。这比setState稍微轻一些，因此如果数千个组件经常设置其状态，它可以用作优化。我用这个测试用例断言了这一点。

If your current state is {a: 1}, and you call this.setState({b: 2}); when the state is applied, it will be {a: 1, b: 2}. If you called this.replaceState({b: 2}) your state would be {b: 2}.

如果您当前的状态为{a：1}，则调用this.setState（{b：2}）;当状态被应用时，它将是{a：1，b：2}。如果您调用this.replaceState（{b：2}），则状态为{b：2}。

Side note: State isn't set instantly, so don't do this.setState({b: 1}); console.log(this.state) when testing.

附注：状态未立即设置，因此请勿执行此操作.setState（{b：1}）; console.log（this.state）测试时。

3 个解决方案

#1

更多相关文章

随机推荐