ReactHook使用useState更新变量后,如何拿到变量更新后的值

const [count, setCount] = useState(0)；

const UseState = () => {
  // 函数组件中没有this
  const [count, setCount] = useState(0)
 
  const add = () => {
    let newCount = count
    console.log('value1', count);  // 0
    setCount( newCount+= 1)
    console.log('value2', count);  // 0
    query() 
  }
 
  const query = () => {
    console.log('query函数中：', count);  // 0
  }
  return (
    <div>
      <p>{count}</p>
      <button onClick={add} >增加</button>
    </div>
  )
}

// 改写add和query函数；
 
const add = () => {
    let newCount = count
    console.log('value1', count);
    setCount( newCount+= 1)
    console.log('value2', count);
    query(newCount)   
 }
 const query = (count) => {
    console.log('query函数中：', count);
 }

  // 组件每次渲染之后执行的操作，执行该操作时dom都已经更新完毕
  useEffect(()=>{
    // 1、可在此处拿到count更新后的值
    console.log('value3', count);
    query()
  }, [count])
 
  const add = () => {
    let newCount = count
    console.log('value1', count);
    setCount( newCount+= 1)
    console.log('value2', count);
  }
 const query = () => { 
   console.log('query函数中：', count);
 }

// 定义一个可变的countRef对象，该对象的current属性被初始化为传入的参数count;
const countRef = useRef(count)
 
// 在countRef.current属性中保存一个可变值count的盒子；
countRef.current = count
 
const add = () => {
   let newCount = count
   console.log('value1', count);
   setCount( newCount+= 1)
   console.log('value2', count);
   setTimeout(() => query(), 0);
}
 
const query = () => {
   console.log('query函数中：', countRef.current);
}