Question

我是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它们，我发现state现在有两个{ {1}}和data。

然后，我尝试了 test ，接着是 this.setState({data: someArray}); ，然后是console.logged它们，我发现this.setState({test: someArray});再次拥有了state和data。

那么，这两者究竟有什么不同呢？

Answer 1

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

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

如果您当前的状态为{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"}

请注意docs中的这一点：

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

replaceState()

也是如此

Answer 3

根据docs，replaceState可能会被弃用：

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

Answer 4

由于replaceState已被弃用，因此这是一个非常简单的解决方法。尽管您很少/应该诉诸于此。

要删除状态：

for (const old_key of Object.keys(this.state))
    this.setState({ [old_key]: undefined });

或者，如果您不想多次拨打setState

const new_state = {};
for (const old_key of Object.keys(this.state))
    new_state[old_key] = undefined;
this.setState(new_state);

基本上，该状态下的所有先前键现在都返回undefined，可以使用if语句很容易地对其进行过滤：

if (this.state.some_old_key) {
    // work with key
} else {
    // key is undefined (has been removed)
}

if ( ! this.state.some_old_key) {
    // key is undefined (has been removed)
} else {
    // work with key
}

在JSX中：

render() {
    return <div>
        { this.state.some_old_key ? "The state remains" : "The state is gone" }
    </div>
}

最后，要“替换”状态，只需将新状态对象与已经undefined的旧状态的副本组合，然后将其设置为状态：

const new_state = {new_key1: "value1", new_key2: "value2"};
const state = this.state;

for (const old_key of Object.keys(state))
    state[old_key] = undefined;

for (const new_key of Object.keys(new_state))
    state[new_key] = new_state[new_key];

this.setState(state);

React.js中的setState vs replaceState

4 个答案: