React 和 Vue 中异步获取数据的处理方式

浅浅的花香味﹌ 2022-08-28 09:56 190阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

在使用state的时候， 如果我们企图直接修改state中的某一个值之后直接打印（使用）他，就会发现，他其实并没有改变。

就像下面的例子，企图通过点击事件之后就使用修改之后的state的值，但是会发state中的并没有被立即修改，还是原先的值，我们都知道那是因为 setState就相当于是一个异步操作，不能立即被修改。

import React, {  Component } from 'react';
    
    export default class App extends Component { 
    
      constructor(props) { 
        super(props);
        this.state = { 
          name: '今天是七夕节'
        };
        this.handleClick = this.handleClick.bind(this)
      }
    
      handleClick() { 
        this.setState({ 
          name: '跟你这只单身狗有什么关系'
        })
        console.log(this.state.name)
      }
    
      render() { 
        return (
          <div>
            <h1>{ this.state.name}</h1>
            <button onClick={ this.handleClick}>点击查看</button>
          </div>
        )
      }
    }

![在这里插入图片描述][2ed18f3834a74e7592b2e0a94df31a8a.gif_pic_center]  
还是只能获取到之前的值。但是我们就是想要立即获取，咋整呢

**第一种：**

这个回调函数会在修改了state之后才会执行，这就可以使用修改之后的state的值。

import React, {  Component } from 'react';
    
    export default class App extends Component { 
    
      constructor(props) { 
        super(props);
        this.state = { 
          name: '今天是七夕节'
        };
        this.handleClick = this.handleClick.bind(this)
      }
    
      handleClick() { 
        this.setState({ 
          name: '跟你这只单身狗有什么关系'
        }, () => { 
          console.log(this.state.name)
        })
      }
    
      render() { 
        return (
          <div>
            <h1>{ this.state.name}</h1>
            <button onClick={ this.handleClick}>点击查看</button>
          </div>
        )
      }
    }

**第二种：**

操作异步函数，用 async / await

import React, {  Component } from 'react';
    
    export default class App extends Component { 
    
      constructor(props) { 
        super(props);
        this.state = { 
          name: '今天是七夕节'
        };
        this.handleClick = this.handleClick.bind(this)
      }
    
      async handleClick() { 
        await this.setState({ 
          name: '跟你这只单身狗有什么关系'
        })
        console.log(this.state.name)
      }
    
      render() { 
        return (
          <div>
            <h1>{ this.state.name}</h1>
            <button onClick={ this.handleClick}>点击查看</button>
          </div>
        )
      }
    }

**第三种：**

setstate 可以接收一个回调函数，而不是一个对象，这个回调函数有两个参数，一个是接收前一个状态值作为第一个参数，并将更新后的值作为第二个参数。

import React, {  Component } from 'react';
    
    export default class App extends Component { 
    
      constructor(props) { 
        super(props);
        this.state = { 
          name: '今天是七夕节'
        };
        this.handleClick = this.handleClick.bind(this)
      }
    
      handleClick() { 
        this.setState(() => { 
          return { 
            name: `跟你这只单身狗有什么关系`
          }
        }, () => { 
          console.log(this.state.name)
        })
      }
    
      render() { 
        return (
          <div>
            <h1>{ this.state.name}</h1>
            <button onClick={ this.handleClick}>点击查看</button>
          </div>
        )
      }
    }

![在这里插入图片描述][7f30bd0154574a5d8efa590cf6f17961.gif_pic_center]

还可以拿到之前的值，进行修改

handleClick() { 
      this.setState((prevState) => { 
        return { 
          name: `${ prevState.name}，但是跟你这只单身狗有什么关系`
        }
      }, () => { 
        console.log(this.state.name)
      })
    }

![在这里插入图片描述][52c1e8b9549e4a7995be06660479075c.gif_pic_center]

react中 state的值在修改了之后并不会立即被修改，setState通过一个队列机制实现state的更新。当执行setState时，会把需要更新的state合并后放入状态队列，而不会立刻更新this.state，利用这个队列机制可以高效的批量的更新state。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16]  
setState之后不会立马触发更新，它会根据当前isBatchingUpdate 判断是否处于批量更新中，如果当前isBatchingUpdate为true,说明处于批量更新中，它会将要更新的值放入到一个队列中，随后将要更新的组件放入dirtyComponent中，当本次批量更新结束后，会将isBatchingUpdate中设置为false,开启本次的批量更新，情况队列，会用object.assign()将多次更新进行一个合并。 react会开启一个事务机制，进行dom diff算法等来进行跟新。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/3b421bb2878143569e32a6f494bc7379.png
[2ed18f3834a74e7592b2e0a94df31a8a.gif_pic_center]: /images/20220828/ee74b9c243af4be9a27a293fe1e6e8fc.png
[7f30bd0154574a5d8efa590cf6f17961.gif_pic_center]: /images/20220828/d4e919a51f814b5fb2e51d8eaef25003.png
[52c1e8b9549e4a7995be06660479075c.gif_pic_center]: /images/20220828/eb6c3d9c45c1492b98cdda3f7fd2592d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/962cfbce60994d879d843db0ba7a41ef.png