1.使用useRef获取DOM元素

1.使用获取DOM元素

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

返回一个可变的 ref 对象，该对象只有个 属性，初始值为传入的参数( 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 (

表单获取焦点
)
}reactDom.render(, document.getElementById('root'))

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

2.-在多次渲染之间共享数据-停止定时器 问题引入:只用

import React, { useEffect, useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {const [count, setCount] = useState(0)let timeId = nullconsole.log(timeId)useEffect(() => {timeId = setInterval(() => {setCount((count) => count + 1)}, 1000)console.log(timeId) // 1}, [])const hClick = () => {console.log(timeId) // nullclearInterval(timeId)}return (
count:{count}点击停止定时器
)
}
ReactDom.render(, document.getElementById('root'))

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

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

使用

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) // 1clearInterval(refTimeId.current)}return (
count:{count}点击停止定时器
)
}
ReactDom.render(, document.getElementById('root'))

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

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