React.js 中的 setState 与 replaceState

IT技术 javascript frontend reactjs
2021-05-12 00:15:31

我是 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});follow 和 console.logged 它们,我发现state现在有datatest

然后,我尝试this.setState({data: someArray});this.setState({test: someArray});follow 和 console.logged 它们,我发现它又state同时具有datatest

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

4个回答

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)在测试时不要这样做

举例定义:

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

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

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

由于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);