Hi FE !
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
  • hooks中的useState怎么做到像setState的第二个参数(回调)取到更新后的值

hooks中的useState怎么做到像setState的第二个参数(回调)取到更新后的值

自定hook方式

import { Button } from 'antd'
import React, { useState, useRef, useEffect } from 'react'
// 使用自定义hook结合useState,模拟class组件的setState的第二个参数-回调函数
const useSimulationCbWithUseStateCustom = (initState: any) => {
  const [num, setNum] = useState(initState)
  const cbRef = useRef<any>(null)

  const setState = (state: any, cbFc: any) => {
    setNum(state)
    cbRef.current = cbFc
  }

  useEffect(() => {
    typeof cbRef.current === 'function' && cbRef.current(num)
    cbRef.current = null
  }, [num])

  return [num, setState]
}

const SimulationCbWithUseStateCustom = () => {
  const [num, setNum] = useSimulationCbWithUseStateCustom(0)
  const addNumCustom = () => {
    setNum(num + 1, (res: number) => {
      console.log('faith=============', res)
    })
  }
  return (
    <div>
      SimulationCbWithUseStateCustom模式
      <Button onClick={addNumCustom}>addNum</Button>num:{num}
    </div>
  )
}
export default SimulationCbWithUseStateCustom

Promise结合useState实现

import { Button } from 'antd'
import React, { useState } from 'react'
// 使用promise结合useState,模拟class组件的setState的第二个参数-回调函数
const SimulationCbWithUseState = () => {
  const [num, setNum] = useState(0)

  const addNum = () => {
    new Promise((resolve, reject) => {
      setNum(preNum => {
        resolve(preNum + 1)
        return preNum + 1
      })
    }).then(res => {
      console.log('faith=============', res)
    })
  }

  return (
    <div>
      SimulationCbWithUseStatePromise模式
      <Button onClick={addNum}>addNum</Button>num:{num}
    </div>
  )
}
export default SimulationCbWithUseState


Edit this page
最近更新: 2025/6/27 02:24
Contributors: qdleader
qdleader
本站总访问量 129823次 | 本站访客数 12人