useRef的基本用法

1.使用useRef获取DOM元素const refContainer = useRef(null);console.log(refContainer)返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( null)。可以把这个ref对象利用元素的ref属性绑定在dom元素上,示例如下:import React, { useRef } from 'react'im

hx_programmer

12726人浏览 · 2021-11-12 20:01:55

hx_programmer · 2021-11-12 20:01:55 发布

1.使用useRef获取DOM元素

const refContainer = useRef(null);
console.log(refContainer)

返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( null)。

可以把这个ref对象利用元素的ref属性绑定在dom元素上,示例如下:

import React, { useRef } from 'react'
import reactDom from 'react-dom'

export default function App () {
  const inputEl = useRef(null)
  const hClick = () => {
    inputEl.current.focus() // 这里的inputEl.current就是input元素,所以可以调用原生input的方法
  }
  return (
    <div>
      <input type="text" ref={inputEl} />
      <br />
      <button onClick={hClick}>表单获取焦点</button>
    </div>
  )
}

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

通过ref获取组件内的DOM

小结： 通过useRef定义个inputEl变量，在input 元素上定义ref={inputEl},这样通过inputEl.current就可以获取到input Dom 元素，选中则调用下focus函数即可

2.useRef-在多次渲染之间共享数据-停止定时器

问题引入:只用useState

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) // 1
  }, [])

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

  return (
    <div>
      count:{count}
      <button onClick={hClick}>点击停止定时器</button>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

现象: 由于setCount改变状态时都会重新走一遍函数组件,也就是说会重新执行let timeId = null,所以我们点击按钮时timeId为null,而上面打印出来的timeId为1,结果就是定时器根本就清除不掉

小结:不同渲染之间无法共享state状态值

使用useRef

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

  const hClick = () => {
    console.log(refTimeId.current) // 1
    clearInterval(refTimeId.current)
  }

  return (
    <div>
      count:{count}
      <button onClick={hClick}>点击停止定时器</button>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

现象: 打印台打印的都是3,所以定时器被正常清除了

小结: 采用useRef,作为组件实例的变量，const refTimeId = useRef(null)只会执行一次