使用setState和useState获取更新后的值

前言

接触过React框架的小伙伴们应该对 setState 和 useState并不陌生。我们在开发中会有一些场景需要依赖到更新后的值进行操作，下面简单介绍一下怎样获取它们更新后的值。

---

一、setState？

setState是class组件用来更新状态的异步方法，它可以接收两个参数，第一个参数为一个对象，第二个参数为一个函数，即更新成功后执行的回调函数。我们可以在回调函数中获取更新后的值。

import React, { Component } from 'react'

export default class TestSetState extends Component {
  state = {
    count: 0
  }
  handleChange = ()=>{
    this.setState({count: 1000},()=>{
      console.log("我是更新后的count:",this.state.count);
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.handleChange}>点我</button>
      </div>
    )
  }
}

---

二、useState？

useState是React16.8的新增特性，它可以让你在不使用class组件的情况下使用state。useState有一个唯一参数就是变量的初始值，它返回两个变量，第一个为初始值，第二个为修改值的"set方法"。官方并没有给出如何获取更新后的值，下面我们介绍两种set方法后获取更新后的值的方法。
1、使用useEffect

import React, {useEffect, useState} from 'react'

export default function TestUseState() {
  let [num, setNum] = useState(0)
  useEffect(() => {
    console.log("更新后的num:",num);
  },[num])
  return (
    <div>
      <div>{num}</div>
      <button onClick={() => {
        setNum(1000)
      }}>点我</button>
    </div>
  )
}

2、函数作为参数

import React, { useState} from 'react'

export default function TestUseState() {
  let [num, setNum] = useState(0)
  return (
    <div>
      <div>{num}</div>
      <button onClick={() => {
        setNum(prevFoo => {
          prevFoo = 1000 
          // 将prevFoo返回，prevFoo就是更新后的num，我们可以在下面依赖prevFoo做一些操作
          console.log("更新后的num:",prevFoo);
          return prevFoo;
        });
      }}>点我</button>
    </div>
  )
}

总结

希望正在自己和正在学习React的小伙伴们可以早日攻下React这座大山！！！