javascript - React.js中的setState vs replaceState

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

  • state
  • state

给出的描述不是很清楚(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.

我尝试了state,接着是state,然后是console.logged他们,我发现state现在同时拥有datatest

然后,我尝试了state,接着是state,然后是console.logged他们,我发现state再次同时拥有datatest

那么,这两者究竟有什么区别?

myusuf asked 2019-08-19T13:35:17Z
3个解决方案
135 votes

使用this.setState({b: 1}); console.log(this.state)合并当前和以前的状态。 使用this.setState({b: 2}),它会抛出当前状态,并仅使用您提供的内容替换它。 通常使用{a: 1, b: 2},除非您出于某种原因确实需要删除密钥; 但将它们设置为false / null通常是一种更明确的策略。

虽然它可能会改变; replaceState当前使用作为状态传递的对象,即this.setState({b: 1}); console.log(this.state),并且一旦设置为this.setState({b: 2})。这比{a: 1, b: 2}轻一点,因此如果数千个组件经常设置其状态,它可以用作优化。
我用这个测试用例断言了这一点。


如果您当前的状态是this.setState({b: 1}); console.log(this.state),请致电this.setState({b: 2}); 当州应用时,它将是{a: 1, b: 2}.如果你打电话this.replaceState({b: 2}),你的州将是{b: 2}

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

FakeRainBrigand answered 2019-08-19T13:36:03Z
43 votes

通过示例定义:

// let's say that this.state is {foo: 42}

this.setState({bar: 117})

// this.state is now {foo: 42, bar: 117}

this.setState({foo: 43})

// this.state is now {foo: 43, bar: 117}

this.replaceState({baz: "hello"})

// this.state. is now {baz: "hello"}

但请注意文档中的这一点:

setState()不会立即改变this.state但会创建一个   待定状态转换。 调用后访问this.state   方法可以返回现有值。

replaceState()也是如此

Grav answered 2019-08-19T13:36:53Z
13 votes

根据文档,replaceState可能会被弃用:

扩展React.Component的ES6类组件不提供此方法。 它可能会在未来版本的React中完全删除。

Liran Brimer answered 2019-08-19T13:37:29Z
translate from https://stackoverflow.com:/questions/23293626/setstate-vs-replacestate-in-react-js