useRef、useImperativeHandle

• useRef可以直接获取dom元素

import React from 'react';
import ReactDOM from 'react-dom';
import { useRef, useState } from 'react';

const App = () => {

  const inputRef = useRef();
  
  const clickClear = () => {
    inputRef.current.value = '';
  }

  return (
    <>
      <input ref={inputRef}/>
      <br />
      <button onClick={clickClear}>清空输入框</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

• useRef结合useImperativeHandle可以通过父组件获取子组件的方法

import React, { useImperativeHandle, useRef, forwardRef } from "react";
import ReactDom from 'react-dom';

const Child = (props, ref) => {
  useImperativeHandle(ref, () => ({
    test: () => {
      console.log("i am child's test method");
    },
  }));

  return <div> i am test's child </div>;
};

const Index = () => {
  const ref = useRef();
  const FChild = forwardRef(Child);

  const clickBtn = () => {
    ref.current.test();
  };

  return (
    <div>
      <button onClick={clickBtn}> click me </button>
      <FChild ref={ref}></FChild>
    </div>
  );
};

ReactDom.render( <Index />, document.getElementById('root') );

• 通过useRef和forwardRef获取子组件的特定元素
• 此方式不推荐使用，违反了封装的设计原则，耦合性过高

import React, { useRef, forwardRef } from "react";
import ReactDOM from 'react-dom'

const Child = (props, ref) => {
  return <input ref={ref}/>;
};

const Index =  () => {
  const childRef = useRef();
  const FChild = forwardRef(Child); // 函数组件如果要通过ref进行获取，需要通过forwardRef转换为高阶组件。

  const clickFather = () => {
    childRef.current.focus();
  };

  return (
    <div>
      <button onClick={clickFather}> click me </button>
      <FChild ref={childRef}></FChild>
    </div>
  );
};

ReactDOM.render(<Index />, document.getElementById('root'));