react hook开发遇到的一些问题

2022-12-15 18:08:26 浏览数 (3)

问题一

  • 使用 useState改变值后 拿到的值不是最新值
代码语言：javascript复制
const [isFocus, setIsFocus] = useState<boolean>(false)

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

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

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

问题二

  • 使用刷卡器刷卡时发现设备是将卡片ID一次一次的读出来的 需要使用防抖函数包裹一下刷卡的相关操作
  • 使用防抖函数包裹发现没有效果
代码语言：javascript复制
const handleCardRead = useCallback(debounce(() => {
  // do something
}), [])

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

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

获取输入框的值

  • 使用antd框架 通过 onChange
代码语言：javascript复制
const test: React.FC = () => {
	const [value, setValue] = useState('')
	
	const onChange = value => {
	  setValue(value.target.value)
	}
	
	return(
	  <Input value={value} onChange={onChange} />
	)
}
  • 使用useRef
代码语言：javascript复制
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>
  )
}
antd render setstate settimeout

0 人点赞