setState知识细节

更合理的 setState

借助于 Redux，我们可以轻松的对 React 中的状态进行管理和维护，同时，React 也为我们提供了组件内的状态管理的方案，也就是 setState()。本文不会涉及到 Redux，我们将从 Component 的角度来说明你不知道的以及更合理的 setState()。

先说说大家都知道的

在 React 文档的 State and Lifecycle 一章中，其实有明确的说明 setState() 的用法，向 setState() 中传入一个对象来对已有的 state 进行更新。

比如现在有下面的这样一段代码：

class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: this.state.count + 1 }; } }

我们如果想要对这个 state 进行更新的话，就可以这样使用 setState()：

this.setState({ count: 1 });

---

你可能不知道的

最基本的用法世人皆知，但是，在 React 的文档下面，还写着，处理关于异步更新 state 的问题的时候，就不能简单地传入对象来进行更新了。这个时候，需要采用另外一种方式来对 state 进行更新。

setState() 不仅能够接受一个对象作为参数，还能够接受一个函数作为参数。函数的参数即为 state 的前一个状态以及 props。

所以，我们可以向下面这样来更新 state：

this.setState( (prevState, props) => ({ count: prevState.count + 1 }));

这样写的话，能够达到同样的效果。那么，他们之间有什么区别呢？

---

区别

我们来详细探讨一下为什么会有两种设置 state 的方案，他们之间有什么区别，我们应该在何时使用何种方案来更新我们的 state 才是最好的。

此处，为了能够明确的看出 state 的更新，我们采用一个比较简单的例子来进行说明。

我们设置一个累加器，在 state 上设置一个 count 属性，同时，为其增加一个 increment 方法，通过这个 increment 方法来更新 count。

此处，我们采用给 setState() 传入对象的方式来更新 state，同时，我们在此处设置每调用一次 increment 方法的时候，就调用两次 setState()。具体的原因我们在后文中会讲解。

具体的代码如下：

class IncrementByObject extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.increment = this.increment.bind( this); } // 此处设置调用两次 setState() increment() { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <button onClick={this.increment}>IncrementByObject </button> <span>{this.state.count} </span> </div> ); } } ReactDOM.render( <IncrementByObject />, document.getElementById('root') );

这时候，我们点击 button 的时候，count 就会更新了。但是，可能与我们所预期的有所差别。我们设置了点击一次就调用两次 setState()，但是，count 每一次却还是只增加了 1，所以这是为什么呢？

其实，在 React 内部，对于这种情况，采用的是对象合并的操作，就和我们所熟知的 Object.assign() 执行的结果一样。

比如，我们有以下的代码：

Object.assign({}, { a: 2, b: 3 }, { a: 1, c: 4 });

那么，我们最终得到的结果将会是 { a: 1, b: 3, c: 4 }。对象合并的操作，属性值将会以最后设置的属性的值为准，如果发现之前存在相同的属性，那么，这个属性将会被后设置的属性所替换。所以，也就不难理解为什么我们调用了两次 setState() 之后，count 依然只增加了 1 了。

用简短的代码说明就是这样：

this.setState({ count: this.state.count + 1 }); // 同理于 Object.assign({}, this.state, { count: this.state.count + 1 });

以上是我们采用对象的方式传入 setState() 来更新 state 的说明。接下来我们再看看使用函数的方式来更新 state 会有怎么样的效果呢？

---

我们将上面的累加器采用另外的方式来实现一次，在 setState() 的时候，我们采用传入一个函数的方式来更新我们的 state。

class IncrementByFunction extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.increment = this.increment.bind( this); } increment() { // 采用传入函数的方式来更新 state this.setState( (prevState, props) => ({ count: prevState.count + 1 })); this.setState( (prevState, props) => ({ count: prevState.count + 1 })); } render() { return ( <div> <button onClick={this.increment}>IncrementByFunction </button> <span>{this.state.count} </span> </div> ); } } ReactDOM.render( <IncrementByFunction />, document.getElementById('root') );

当我们再次点击按钮的时候，就会发现，我们的累加器就会每次增加 2 了。

我们可以通过查看 React 的源代码来找出这两种更新 state 的区别 (此处只展示通过传入函数进行更新的方式的部分源码)。

在 React 的源代码中，我们可以看到这样一句代码：

this.updater.enqueueSetState( this, partialState, callback, 'setState');

然后，enqueueSetState 函数中又会有这样的实现：

queue.push(partialState); enqueueUpdate(internalInstance);

所以，与传入对象更新 state 的方式不同，我们传入函数来更新 state 的时候，React 会把我们更新 state 的函数加入到一个队列里面，然后，按照函数的顺序依次调用。同时，为每个函数传入 state 的前一个状态，这样，就能更合理的来更新我们的 state 了。

---

React中另一个改变状态的方法 replaceState

    

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。使用语法：

replaceState(object nextState[, function callback])

• 1

• nextState，将要设置的新状态，该状态会替换当前的state。
• callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

为了说明 setState() 和 replaceState() 的区别，通过以下例子说明：

var HelloMessage = React.createClass({
    getInitialState: function() {
        return { 
            isRed : true,
            count:0
         };
    },
    handleClick1: function(){
        this.setState({isRed : !this.state.isRed},function(){
            console.log("setState:");
            console.log(this.state);
        });
    },
    handleClick2: function(){
        this.replaceState({count : this.state.count+1},function(){
            console.log("replaceState:");
            console.log(this.state);
        });
    },
  render: function() {
    var redStyle = {
        color:'red'
    };
    var blueStyle = {
        color:'blue'
    };
    return (
        <div>
            <h1 style={this.state.isRed ? redStyle : blueStyle}>Hello {this.props.name}！</h1>
            <button onClick={this.handleClick1}>点击切换颜色</button>
            <button onClick={this.handleClick2}>点击次数：{this.state.count}</button>
        </div>
        );
  }
});

ReactDOM.render(
    <HelloMessage name='sean' />,
    document.getElementById("example"));

    </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

以上程序设置了两个button，一个调用setState() 另一个调用replaceState()，我们看一下运行结果：

通过运行结果我们可以知道，点击第一个button时，调用 setState() ，会将新状态合并到当前状态，因此，状态 isRed 更新到最新状态，而状态 count 没有改变，保持原有状态。

当点击第二个button时，调用 replaceState()，替换当前的状态，由于replaceState()中只设置状态 count ， 因此state中只有count一个状态，由于isRed状态不存在，this.state.isRed ? redStyle : blueStyle中 this.state.isRed为false，这样显示的样式为 blueStyle。

文章来源：

1：https://blog.csdn.net/u014607184/article/details/53234103；

2：https://www.erichain.me/2017/04/17/2017-04-17-more-reasonable-setstate/