import React, { useState, useEffect, useRef } from 'react'
const LikeButton: React.FC = () => {
  const [like, setLike] = useState(0)
  const likeRef = useRef(0)
  const didMountRef = useRef(false)
  const inputRef = useRef < HTMLInputElement > null
  useEffect(() => {
    document.title = `点击了${like}次`
  }, [like])
  useEffect(() => {
    if (didMountRef.current) {
      console.log('did mounted')
    } else {
      didMountRef.current = true
    }
  })
  const btnClick = () => {
    setLike(like + 1)
    likeRef.current = likeRef.current + 1
    if (inputRef && inputRef.current) {
      inputRef.current.focus()
    }
  }
  const consoleLike = () => {
    setTimeout(() => {
      console.log(like, 'like')
      console.log(likeRef)
    }, 2000)
  }
  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={consoleLike}>console</button>
      <button onClick={btnClick}>👍 +{like}</button>
    </>
  )
}
export default LikeButton