react_hooks系列05_useRef，useImperativeHandle，高阶组件forwordRef

最新推荐文章于 2023-08-26 21:32:11 发布

田江

最新推荐文章于 2023-08-26 21:32:11 发布

阅读量915

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/jiang7701037/article/details/131506050

版权

本文介绍了ReactHooks中的useRef和useImperativeHandle，以及如何配合forwardRef在自定义组件中使用。useRef用于在组件整个生命周期内保存状态，特别是在对DOM元素进行操作时。useImperativeHandle则允许我们自定义通过ref暴露给父组件的实例方法。forwardRef则是为了让函数式组件支持ref，以便于父组件能访问到子组件的实例。

摘要由CSDN通过智能技术生成

`一、useRef`

`1、uesRef使用在官方标签上`

useRef 返回一个可变的 ref 对象，其(ref 对象) .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

import {useRef} from "react";

let refContainer = useRef(initialValue); 

<JSX ref={refContainer} ...

refContainer.current.dom操作

一个常见的用例便是命令式地访问子组件：

function TextInputWithFocusButton() {
    //定义了一个ref变量：inputEl
  const inputEl = useRef(null);
  
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
    
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

2、`uesRef使用在自定义组件上`

如果ref引用的都是函数式组件，那么需要配合 useImperativeHandle 和高阶组件forwordRef 。

在类组件里，如果用ref引入组件对象。那么类组件中的实例属性和方法都可以被外部使用（这也是类的特性）。但是函数式组件只是个函数。没法对外开放。所以，需要使用useImperativeHandle 来进行对外开发。同时还需要结合forwardRef。

`二、`useImperativeHandle `和高阶组件forwordRef`

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用：

//父组件


import { Button } from 'antd';
import React,{useRef} from 'react'
import SonA from './SonA'

export default function Parent() {
  
  const refSon = useRef();  
  
  const refInput = useRef(null);

  function fn(){
    console.log("refSon.current",refSon.current);
    console.log("refInput",refInput);
  }

  return (
    <>
    <div>useRefDemo02</div>
    <input type="button" value="测试" onClick={fn} />
    
    <input type="text" ref={refInput}/>

  	  <SonA ref={refSon} ></SonA>
    </>
  )
}



//子组件

import React,{forwardRef, useImperativeHandle} from 'react';

function SonA(props,ref) {


  // 对外开放（给父组件，给父组件使用ref获取子组件对象时）的数据。
  useImperativeHandle(ref, () => ({
    msg:"hello",
    focus: () => {
      console.log("focus");
    }
  }));
    
    

  return (
    <>
      <div>SonA</div>     
    </>
  )
}


export default forwardRef(SonA);