大纲

进阶基础知识

ref（引用）

• 作用

  • 最初：DOM 的引用
  • 延伸：用在不需要引起视图更新的数据存储场景

• 示例

  // 简单使用
  import React, { useEffect, useRef } from "react";
  
  // 用在 class 组件
  // const ref = React.createRef();
  
  export function RefDemo() {
    const ref = useRef(null);
    useEffect(() => {
      console.log(ref.current);
    }, []);
    return (
      <div>
        <h2 ref={ref}>Ref Demo</h2>
      </div>
    )
  }
  

  // 绑定多个 ref
  import React, { useEffect, useRef } from "react";
  
  interface Refs {
    c1?: HTMLHeadingElement | null;
    c2?: HTMLHeadingElement | null;
    c3?: HTMLHeadingElement | null;
  }
  export function RefDemo() {
    const refs = useRef<Refs>({});
    useEffect(() => {
      console.log(refs.current);
    }, []);
    return (
      <div>
        <h2 ref={(node) => { refs.current.c1 = node }}>Ref 1 Demo</h2>
        <h2 ref={(node) => { refs.current.c2 = node }}>Ref 2 Demo</h2>
        <h2 ref={(node) => { refs.current.c3 = node }}>Ref 3 Demo</h2>
      </div>
    )
  }
  

forwardRef

• 作用

  • 获取子组件的 ref 需要使用到
    • 因为组件内部写的 ref 是 react element 提供的，自定义组件不支持

• 示例

  import React, { forwardRef, useEffect, useId, useRef } from "react";
  
  interface InputProps {};
  
  const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
    const id = useId();
    return (
      <div style={{ display: "flex" }}>
        <label htmlFor={id}>child input</label>
        <input id={id} ref={ref} />
      </div>
    )
  });
  
  export const ForwardRefDemo = () => {
    const ref = useRef<HTMLInputElement | null>(null);
    useEffect(() => {
      console.log(ref);
    }, []);
    return <Input ref={ref} />
  }
  

useImperativeHandle

useImperativeHandle 和 forwardRef 往往一起出现，但它们的职责是完全不同的层级。

概述

React 的 useImperativeHandle 是一个 Hook，用来 自定义暴露给父组件的 ref 内容。

换句话说：

• 当父组件用 ref 获取子组件实例时；
• 子组件可以用 useImperativeHandle 控制“父组件能看到什么”。

基础语法

useImperativeHandle(ref, createHandle, [deps])

参数说明

• ref：父组件传进来的 ref（通常通过 forwardRef 接收）