react 中onTouchStart 使用useState不触发更新

Question

const [isOnTouch, setIsOnTouch] = useState(false)

const onTouchStart = () => {
    setIsOnTouch(true) // 触摸设为true
    setTimeout(() => {
      console.log(isOnTouch) // false  延迟3s后依然未更新
    }, 3000)
  }
  const onTouchEnd = () => {
    setIsOnTouch(false) // 手指离开设置fasle
    console.log(isOnTouch) // true
    setTimeout(() => {
      console.log(isOnTouch) // true  延迟3s后依然是true
    }, 3000)
  }

<View className="record_btn" onTouchStart={ onTouchStart } onTouchEnd={ onTouchEnd }>录制语音</View>

我想实现的效果就是手指按下，需要有个flag标记为true， 手指离开flag为false,如果直接声明一个变量就可以实现，但是用useState管理就不行了， 想知道是为什么? 我知道useState是异步更新的，但是为什么在OnTouchEnd中还是true

Answer 1

react函数组件，state变化时，整个函数会重新执行，会生成新的执行上下文（变量会重新申明，但是值会使用set后的），定时器中的回调函数是当前执行环境下申明的，所以使用的是当前环境的变量（类似闭包）