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

更新时间：2022年09月01日 14:38:53 作者：搞前端的小菜

我们知道，在React中没有像Vue那种数据双向绑定的效果。而this.setState方法就是用来对数据进行更改的。而通过this.setState方法更改的数据，会让组件的render重新渲染，并且刷新数据

摘要

这一篇文章，主要是简单的实现一下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);
    new Promise((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 = ( changeState ) =>{
    Object.assign(this.myState,changeState)
    this.setState(
      this.myState
    )
  }

我们只需要知道最后一个changeState，所以这里我们维护一个队列，用来保存所有的changeState，然后每次调用mySetState 方法的时候，将changeState放到队列里面：

  queue = []
  mySetState = ( changeState ) =>{
    Promise.resolve().then(()=>{
      this.stateShift()
    })
    this.queue.push(changeState)
    this.setState(
      this.myState
    )
  }

重头戏来了，我们已经有了这个队列，那我们是如何让这个队列的changeState 出来的呢？

这里我们写一个方法：

  stateShift() {
    let empty;
    while(empty = this.queue.shift()){
    }
  }

通过迭代器的方式，遍历队列。empty就是拿到的每个changeState 。changeState 有两种形式，对象的时候肯定是很好写的。

  stateShift() {
    let empty;
    while(empty = this.queue.shift()){
      if(typeof empty === 'object'){
        Object.assign(this.myState,empty)
      }
  }

只需要让新出来的去替换旧的就可以了。如果changeState 是一个方法，这个时候，我们需要手动去维护一个preState变量，这个变量的作用就是用来保存上一个state。

所以具体的实现应该为：

  stateShift() {
    let empty;
    while(empty = this.queue.shift()){
      if(!this.preState){
        this.preState =  Object.assign({},this.myState)
      }
      if(typeof empty === 'object'){
        Object.assign(this.myState,empty)
      }else if(typeof empty === 'function'){
        Object.assign(this.myState,empty(this.preState))
      }
      this.preState = this.myState
    }
  }

最后一步，这个方法应该什么时候调用。其实需要注意的无非就是，要在所有的changeState 都放到队列中，再进行调用。

而this.queue.push(changeState)这段代码又是同步的代码，所以在它之前，通过异步的方式调用，就可以实现出这种效果：

  mySetState = ( changeState ) =>{
    Promise.resolve().then(()=>{
      this.stateShift()
    })
    this.queue.push(changeState)
    this.setState(
      this.myState
    )
  }

最后将整个实现代码附上：

import React, { Component } from 'react'
export default class Child extends Component {
  state = {
    value: 0
  }
  myState = {
    value: 0
  }
  queue = []
  mySetState = ( changeState ) =>{
    Promise.resolve().then(()=>{
      this.stateShift()
    })
    this.queue.push(changeState)
    this.setState(
      this.myState
    )
  }
  stateShift() {
    let empty;
    while(empty = this.queue.shift()){
      if(!this.preState){
        this.preState =  Object.assign({},this.myState)
      }
      if(typeof empty === 'object'){
        Object.assign(this.myState,empty)
      }else if(typeof empty === 'function'){
        Object.assign(this.myState,empty(this.preState))
      }
      this.preState = this.myState
    }
  }
  add = ()=>{
    //测试代码
    // this.mySetState( (pre) => {
    //   return {
    //     value: pre.value + 1
    //   }
    // } )
    // this.mySetState( (pre) => {
    //   return {
    //     value: pre.value + 1
    //   }
    // } )
    // this.mySetState( (pre) => {
    //   return {
    //     value: pre.value + 1
    //   }
    // } )
    // this.mySetState({
    //   value: this.myState.value+1
    // })
    // this.mySetState({
    //   value: this.myState.value+1
    // })
    // this.mySetState({
    //   value: this.myState.value+1
    // })
    // this.mySetState({
    //   value: this.myState.value+1
    // })
    setTimeout(() => {
      console.log('SetTimeOut ---- '+this.myState.value);
    }, 0);
    new Promise((resolve,reject) => {
      resolve(this.myState.value)
    })
    .then(res => {
      console.log('Promise ---- '+res);
    })
    this.mySetState({
      value: this.myState.value+1
    })
    console.log(this.myState.value);
  }
  render() {
    return (
      <div>
        <span>{this.myState.value}</span>
        <br></br>
        <button onClick={this.add}>++</button>
      </div>
    )
  }
}

最后值得注意的是，这里只是针对于setState的一些特点去模拟了一下setState的实现，具体的源码可能不会像这样简单！

到此这篇关于React this.setState方法使用原理分析介绍的文章就介绍到这了,更多相关React this.setState内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解React组件卸载怎么中止递归方法
最近在处理项目代码的时候,出现了一个bug,组件中的方法在组件卸载后仍然在执行,代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛,所以本文详细给大家介绍了React组件卸载怎么中止递归方法,需要的朋友可以参考下
2024-01-01
react中的DOM操作实现
某些情况下需要在典型数据流外强制修改子代。要修改的子代可以是 React 组件实例，也可以是 DOM 元素。这时就要用到refs来操作DOM，本文详细的介绍一下使用，感兴趣的可以了解一下
2021-06-06
React父子组件间的通信是怎样进行的
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2023-03-03
react-router-dom V6的配置使用实践
本文主要介绍了react-router-dom V6的配置使用实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
详解如何在react中搭建d3力导向图
本篇文章主要介绍了如何在react中搭建d3力导向图，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
一文教你如何避免React中常见的8个错误
这篇文章主要来和大家一起分享在 React 开发中常见的一些错误,以及如何避免这些错误,理解这些问题背后的细节,防止犯下类似的错误,需要的可以参考下
2023-12-12
一文带你搞懂react hooks的类型声明
这篇文章主要给带大家搞清楚react hooks的类型声明，如果有同学还不清楚react hooks的类型声明，来看本文就对了，文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-07-07
浅谈React前后端同构防止重复渲染
这篇文章主要介绍了浅谈React前后端同构防止重复渲染，首先解释React前后端同构、React首屏渲染的概念。然后通过这2个概念解决服务端渲染完成后浏览器端重复渲染的问题。有兴趣的可以了解一下
2018-01-01
react中axios结合后端实现GET和POST请求方式
这篇文章主要介绍了react中axios结合后端实现GET和POST请求方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
React中的useEffect四种用法分享
这篇文章主要给大家分享React中的useEffect四种用法，useEffect中触发更新，重复的 useEffect，依赖值触发回调，useEffect 的返回值，通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-07-07