React.js中的setState vs replaceState

Question

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

• 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});然后控制台.记录它们,我发现state现在有两个data和test.

然后,我尝试this.setState({data: someArray});跟着this.setState({test: someArray});然后控制台.记录它们,我发现state再次有两个data和test.

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

Answer 1

与setState当前和以前的州合并.使用replaceState它会抛出当前状态,并仅使用您提供的内容替换它.setState除非你真的需要因某些原因删除密钥,否则通常会被使用; 但将它们设置为false/null通常是一种更明确的策略.

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

如果您当前的状态是{a: 1},并且您打电话this.setState({b: 2}); 当状态被应用时,它将是{a: 1, b: 2}.如果你打电话给this.replaceState({b: 2})你的州就会{b: 2}.

附注:状态未立即设置,因此this.setState({b: 1}); console.log(this.state)在测试时不要这样做.

Answer 2

通过示例定义:

// 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()

Answer 3

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

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