我们在类组件中要获取到节点,ref传递一个回调函数,要么传递**React.createRef**引用
表单组件
表单组件
函数组件中我们要得到节点,可以使用useRef来获取

作用

useRef的作用：获取DOM节点和获取组件实例
useRef执行过后返回一个对象，该对象有一个current属性，将来的DOM节点或者组件实例会放到该属性保存起来，
它的初始值就是调用useRef时传入的参数

  1. import React, { useEffect,useState,useRef } from 'react'
  2. export default function RefComp() {
  3.     const [count,setCount] = useState(10)
  4.     // 底层封装的就是React.createRef()
  5.     const userRef = useRef()
  6.     useEffect(() => {
  7.         console.log(RefComp.inputElement);
  8.         console.log(userRef.current);
  9.     }, [])
  10.     const changeCount = (event)=>{
  11.         console.log(event.target.value);
  12.         setCount(event.target.value)
  13.     }
  14.     return (
  15.         <div>
  16.             <input type="text" ref={input => RefComp.inputElement = input} />
  17.             <input type="text" onChange={changeCount} value={count} />
  18.             <input type="text"  ref={userRef}/>
  19.         </div>
  20.     )
  21. }

根据结果我们可以发现,useRef得到的{current:节点}，useRef这个hook底层就是封装了React.createRef()模块
受控组件和非受控组件用法跟类组件保持一致