Reactthis.setState方法使用原理分析介绍.docxVIP

第

Reactthis.setState方法使用原理分析介绍

目录摘要1.异步的setState2.多个setState方法3.手动实现mySetState

摘要

这一篇文章，主要是简单的实现一下this.setState方法，为了实现该方法，就要知道this.setState方法具有什么特点。

首先在React组件中，我们先定义一个state和setState方法：

myState={

value:0

mySetState=(changeState)={

this.setState(

this.myState

这里可能会说，为什么在自己写的mySetState方法里还要调用React的setState呢？都调用人家的了还算自己写的吗？

由于在React中，render只能处理通过setState方法修改的值，所以这里我们在mySetState中调用了一下。但是mySetState方法的具体实现还是我们自己去完成。

1.异步的setState

首先，我们看一段代码：

state={

value:0

setTimeout(()={

console.log(SetTimeOut----+this.state.value);

},0);

newPromise((resolve,reject)={

resolve(this.state.value)

.then(res={

console.log(Promise----+res);

this.setState({

value:this.state.value+1

console.log(this.state.value);

这段代码会输出什么呢？

由这个结果我们可以知道上面的代码执行顺序：

（1）console.log(this.state.value);

（2）Promise代码

（3）setState方法

（4）setTimeOut方法

所以setState一定是一个异步的方法。

在实现的时候，要注意异步的问题。

2.多个setState方法

我们继续看一段代码：

this.setState({

value:this.state.value+1

this.setState({

value:this.state.value+1

this.setState({

value:this.state.value+1

this.setState({

value:this.state.value+1

this.setState({

value:this.state.value+1

setTimeout(()={

console.log(this.state.value);

},0);

这段代码输出的会是1还是5呢？

答案是1，这是React为了效率所作的一个优化。防止每次setState都会导致render重新渲染！

而如果我就想要这个效果，React也是提供了一个解决办法，就是setState方法可以接受一个函数作为参数：

this.setState((preState)={

return{

value:preState.value+1

this.setState((preState)={

return{

value:preState.value+1

this.setState((preState)={

return{

value:preState.value+1

this.setState((preState)={

return{

value:preState.value+1

setTimeout(()={

console.log(this.state.value);

},0);

preState代表的是上一个state。

3.手动实现mySetState

OK，有了上面对setState方法分了解，我们可以手动的实现一下mySetState方法

首先解决就是调用多个setState方法的时候，所以我们不能每次调用mySetState方法都让state值更新，也就是这么写：

mySetState=(