[react] hooks基础 =＞ useRef ===

目录

使用 useRef 操作DOM

useRef-在多次渲染之间共享数据

自定义hooks-封装倒计时-需求-验证码

自定义hooks-封装倒计时-需求-404页面3秒跳转

自定义hooks-封装倒计时-提炼hooks

---

使用 useRef 操作DOM

使用场景：在 React 中进行 DOM 操作时，用来获取 DOM

作用：返回一个带有 current 属性的可变对象，通过该对象就可以进行 DOM 操作了。

const inputRef = useRef(null) 

解释：

• 参数：在获取 DOM 时，一般都设置为 null

• 返回值：包含 current 属性的对象。

• 注意：只要在 React 中进行 DOM 操作，都可以通过 useRef Hook 来获取 DOM（比如，获取 DOM 的宽高等）。

• 注意：useRef不仅仅可以用于操作DOM，还可以操作组件

示例代码 

// 第一步,引入useRef
import { useRef } from 'react'
import reactDom from 'react-dom'

export default function App () {
  // 第二步,调用useRef,并设置一个空的初始值,得到引入对象
  const inpRef = useRef(null)
  const changeInp = () => {
    //   第四部,通过引入对象.current属性,获得元素或组件
    console.log(inpRef.current)
    inpRef.current.style.backgroundColor = 'red'
    inpRef.current.focus()
  }
  return (
        <div>
            {/* 第三步,把引入对象设置ref给任意元素或组件 */}
            <input ref={inpRef}></input>
            <button onClick={changeInp}>按钮</button>
        </div>
  )
}

reactDom.render(<App></App>, document.querySelector('#root'))

useRef-在多次渲染之间共享数据

问题导入

import React, { useEffect, useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
  const [count, setCount] = useState(0)
  let timeId = null
  console.log(timeId)
  useEffect(() => {
    timeId = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)
    console.log(timeId)
  }, [])

  const hClick = () => {
    console.log(timeId)
    clearInterval(timeId)
  }

  return (
    <div>
      count:{count}
      <button onClick={hClick}>点击停止定时器</button>