react hook开发遇到的一些问题

peng_tianyu

发布于 2022-12-15 18:08:26

47500

代码可运行

文章被收录于专栏：前端开发随记前端开发随记

运行总次数：0

代码可运行

问题一

使用 useState改变值后拿到的值不是最新值

const [isFocus, setIsFocus] = useState<boolean>(false)

const changeFocus = () => {
  setIsFocus(!isFocus)
}

useEffect(() => {
  console.log(isFocus)
  // do something
}, [isFocus])

因为setState是异步的所以调用setState之后无法立刻拿到最新的值使用setTimeout也不行解决办法使用useEffect 以isFocus为依赖触发副作用然后做你想做的事

问题二

使用刷卡器刷卡时发现设备是将卡片ID一次一次的读出来的需要使用防抖函数包裹一下刷卡的相关操作
使用防抖函数包裹发现没有效果

const handleCardRead = useCallback(debounce(() => {
  // do something
}), [])

const handleCardRead2 = useRef(debounce(() => {
  // do something
})).current

由于函数式组件每次 render 都会导致在函数内部定义的变量都会被重新初始化；意味着每次调用debounce函数时都会重新注册一个 setTimeout 回调使用 useRef 返回的值被缓存了起来因此函数式组件重新渲染不会导致debounce的重复执行使用 useCallback 声明只在组件初始化时创建debounce函数第二个参数依赖需要设置为空数组

获取输入框的值

使用antd框架通过 onChange

const test: React.FC = () => {
	const [value, setValue] = useState('')
	
	const onChange = value => {
	  setValue(value.target.value)
	}
	
	return(
	  <Input value={value} onChange={onChange} />
	)
}

使用useRef

const test: React.FC = () => {
  const input = useRef<HTMLInputElement>(null)

  const handleClick = () => {
    console.log(input.current.value)
  }

  return (
    <div>
    	<input type="text" ref={input} />
    	<button onClick={handleClick}></button>
    </div>
  )
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-18，如有侵权请联系 cloudcommunity@tencent.com 删除

antd