React.js 中的 setState 与 replaceState-前端问题

setState vs replaceState in React.js(React.js 中的 setState 与 replaceState)

本文介绍了React.js 中的 setState 与 replaceState的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 React.js 库的新手，我正在阅读一些教程，结果发现:

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

this.setState
this.replaceState

给出的描述不是很清楚(IMO).

The Description given is not very clear (IMO).

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

同样，

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

我试过 this.setState({data: someArray}); 然后是 this.replaceState({test: someArray}); 然后 console.logged 他们，我发现 state 现在有 data 和 test.

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.setState({test: someArray}); 然后 console.logged 它们，我发现 state 再次同时具有 data 和 test.

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.

那么，这两者到底有什么区别呢?

So, what exactly is the difference between the two ?

推荐答案

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

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.

虽然它可能会改变；replaceState 当前使用作为状态传递的对象，即 replaceState(x)，一旦设置为 this.state === x.这比 setState 轻一点，所以如果成千上万的组件经常设置它们的状态，它可以用作优化.
_{我通过 this test case 断言了这一点.}

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

如果你当前的状态是{a: 1}，并且你调用了this.setState({b: 2});当状态被应用时，它将是 {a: 1, b: 2}.如果您调用 this.replaceState({b: 2}) 您的状态将是 {b: 2}.

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

旁注:状态不是立即设置的，所以不要这样做 this.setState({b: 1});console.log(this.state) 测试时.

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

这篇关于React.js 中的 setState 与 replaceState的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！