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

一、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);