React - useRef的基本使用

import React, { Component, useState, useEffect, useRef } from 'react'
import { useControl } from './hooks/useControl'
import ReactDOM from 'react-dom/client'
import { nanoid } from 'nanoid'
import {
  // 🤴🏻🟨 推荐使用as将路由重命名为Router
  HashRouter,
  BrowserRouter as Router,
  Route,
  Link,
  NavLink,
  Switch,
  Redirect,
} from 'react-router-dom'
import { legacy_createStore as createStore } from 'redux'
import store from './store'
 
/**
 * 🧿🍄💥学习目标：hooks补充 - useRef
 * 作用：创建ref对象
 * 等价于： React.createRef()
 * 场景：
 *  1. 获取DOM元素
 *  2. 可以保存任意不需要渲染的数据
 *  3. 获取组件实例对象
 */
const root = ReactDOM.createRoot(document.getElementById('root'))
 
function AppCom01() {
  // 使用useRef创建ref对象
  const iptRef = useRef()
 
  const handleClick = () => {
    console.log('iptRef ===> ', iptRef)
    iptRef.current.focus() // 输入框DOM获取焦点
  }
 
  const [isShow, setIsShow] = useState(true)
 
  return (
    <>
      <div>
        {/* // 将iptRef挂载到DOM元素上 */}
        <input ref={iptRef} type="text" />
        <button onClick={handleClick}>点我input获得光标</button>
        {isShow && <Child />}
        <button onClick={() => setIsShow(!isShow)}>点击卸载</button>
      </div>
    </>
  )
}
// 👨🏻 1. 挂载之后开启定时器
// 👨🏻 2. 卸载时清除定时器
// 👨🏻 3. 可以保存任意不需要渲染的数据
function Child() {
  const timerIdRef = useRef()
 
  useEffect(() => {
    // 赋值任意数据到current
    timerIdRef.current = setInterval(() => {
      console.log('定时器开启了 -----> ')
    }, 500)
  }, [])
 
  useEffect(() => {
    return () => {
      clearInterval(timerIdRef.current)
    }
  }, [])
  return <div>Child</div>
}
 
const divNode = (
  <div>
    <AppCom01 />
  </div>
)
 
root.render(divNode)