React基础（2）—— React函数式组件使用ref

React函数式组件使用ref

• ref

  • ref的作用
    • ref用于获取DOM元素或子组件实例。

• useRef

  • useRef作用

    • useRef用于返回一个可变的ref对象。这个refduix的current属性被初始化为useRef传入的参数initialValue。
    • useRef返回的ref对象在整个生命周期中保持不变。（意思是这个ref对象的地址一直不会变）。
    • ref对象变化不会触发视图更新。（但是当有state改变时，ref对象的变化也会显示在视图上）。
    • 获取的DOM实例将会储存在current属性。（current属性指向DOM实例）

  • useRef使用

    • 在普通DOM元素上使用

      const app: React.FC = () => {
        const element = useRef(null);
        return (
          <>
          	<input ref={element}></input>
          	<button onClick={() => {element.current.focus()}}>click</button>
          </>
        )
      }
      

      在上面的例子中，我们先使用useRef创建了一个ref对象，并且将这个ref对象的current属性初始化为null，再将elemnet这个ref对象赋给普通DOM元素的ref属性。

    • 在组件上使用

      const parent: React.FC = () => {
        const childRef = useRef(null);
        return (
          <>
          	<Child ref={childRef}>
          </>
        )
      }
      

      这样还是拿不到子组件的实例，还需要使用forwaRef。

      forwordRef用在子组件中。（这里的forward是转发的意思，也就是将子组件中想要的DOM元素转发给父组件中使用）。

      const Child: React.FC = forwardRef((props,ref) => {
        return (
          <div>
          	<input type="text" ref={ref}/>
          </div>
        )
      })
      

      上面的例子中使用forwardRef将Child函数式组件包起来，并将传入的第二个参数ref挂在想要获取的元素上。

      （实际上在子组件中使用ref是为了获取子组件TSX中的某个DOM元素，直接挂在想要通过ref获取的DOM上）