ReSt.js中的setState和replaceState

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

  • this.setState
  • this.replaceState

给出的描述不是很清楚(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他们,我发现现在statedatatest

然后,我试着this.setState({data: someArray}); 其次是this.setState({test: someArray}); 然后console.logged他们,我发现state再次有datatest

那么,两者之间究竟有什么区别呢?

setState将当前和以前的状态合并。 使用replaceState ,它将抛出当前状态,并且只用您提供的内容replace它。 通常setState被使用,除非你真的需要删除键出于某种原因; 但是将它们设置为false / null通常是一个更明确的策略。

虽然这可能会改变, replaceState当前使用作为状态传递的对象,即replaceState(x) ,并且一旦设置this.state === x 。 这比setState轻一点,所以如果数千个组件频繁地设置它们的状态,它可以被用作优化。
我在这个testing用例中声明了这一点 。


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

注意:State没有立即设置,所以不要这样做this.setState({b: 1}); console.log(this.state) this.setState({b: 1}); console.log(this.state)在testing时。

通过示例定义:

 // 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,但会创build一个挂起的状态转换。 调用此方法后访问this.state可能会返回现有的值。

replaceState()

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

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