简单理解setState和useState的区别

最近在学习react的时候容易分不清两者的用法，因此写下来加深一下记忆。

获取修改后的值

setState

this.setState({
 value:this.state.value+1
},()=>{
 console.log(this.state.value)  // 可以监控到最新值
})

useState

官方将setState移除了回调方法，由于setState是异步方法，没办法直接在set后拿到最新的数据，所以可以通过以下的方式来拿到更新后的值。

1.通过回调实现

// 定义 useCallbackState
  import React,{useEffect,useState,useRef} from 'react 
  const useCallbackState = (a)=>{
  const bRef = useRef()
  const [data,setData] = useState(a)
 
  useEffect(()=>{
    bRef.current && bRef.current(data)
  },[data])
 
  return [data,function(d,callback) {
    bRef.current = callback
    setData(d)
   }] 
 }
 export default useCallbackState

// 使用useCallbackState
  import useCallbackState from './useCallbackState'
  const App = ()=>{
    const [data,setData] = useCallbackState(1)
    const btnHandle = ()=>{
      setData(data+1,function(data){
        console.log('回调',data)
      })
    }
    return (
      <div>
        <button onClick={btnHandle}>+1</button>
      </div>
    )
  }
  export default App

2.Promise实现

  const [value,setValue] =useState(0)
  const add= ()=>{
  new Promise((resolve)=>{
    setValue((num)=>{
       resolve(num+1)
       return num + 1
    })
  }).then(res=>{
     console.log(res)
     ...
  })
}

官方移除setState的回调，更推荐使用useEffect。