React.forwardRef和React.useImperativeHandle使用详解

一、React.forwardRef

React.forwardRef是 React 提供的一个函数，用于在组件中使用 ref 时，向子组件传递 ref。通常在使用 ref 时，ref 是直接传递给 DOM 元素或 class 组件的实例。但对于函数组件，如果要将 ref 传递给子组件，可以使用 React.forwardRef。
例如：

import React, { forwardRef } from 'react';
import { View, Text } from 'react-native';

const ChildComponent = forwardRef((props, ref) => {
  // 在子组件中使用ref
  return (
    <View ref={ref}>
      <Text>Hello from ChildComponent!</Text>
    </View>
  );
});

const ParentComponent = () => {
  // 创建ref
  const myRef = React.createRef();

  return (
    <View>
      {/* 使用forwardRef将ref传递给子组件 */}
      <ChildComponent ref={myRef} />
    </View>
  );
};

在这个例子中，ChildComponent 是一个函数组件，通过 forwardRef 包裹，使其能够接收 ref。然后，在 ParentComponent 中，创建一个 ref 并将其传递给 ChildComponent。这样，myRef 就可以在 ParentComponent 中引用 ChildComponent 内的 View 组件。

使用 React.forwardRef 是为了解决在函数组件中无法直接传递 ref 的问题，使得在函数组件中也能够方便地使用 ref。

二、React.useImperativeHandle

React.useImperativeHandle 是React中的一个Hook，用于定制在使用 forwardRef 时，向父组件暴露的实例值（ref对象）。

当使用 forwardRef 将 ref 传递给子组件时，通常情况下，父组件可以访问到子组件的实例（通过 ref.current），但在某些情况下，你可能只想向父组件公开一部分实例，而不是整个实例。

useImperativeHandle允许你在子组件中自定义向外暴露的属性或方法。它接收两个参数：第一个参数是 ref 对象，第二个参数是一个函数，这个函数返回一个对象，包含你想要暴露给父组件的属性或方法。
例如：

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

const ChildComponent = forwardRef((props, ref) => {
  const internalRef = useRef();

  // 将需要暴露给父组件的属性或方法定义在这个函数中
  useImperativeHandle(ref, () => ({
    // 仅向外暴露一个名为 'focus' 的方法
    focus: () => {
      internalRef.current.focus();
    },
    // 其他属性或方法...
  }));

  return <input ref={internalRef} />;
});

const ParentComponent = () => {
  const childRef = useRef();

  // 使用 ChildComponent，并将 ref 传递给子组件
  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={() => childRef.current.focus()}>Focus Input</button>
    </div>
  );
};

在这个例子中，ChildComponent 内部有一个输入框，并使用 useImperativeHandle 将一个名为 focus 的方法暴露给父组件。在 ParentComponent 中，通过调用 childRef.current.focus() 可以聚焦子组件的输入框。

这有助于提供一种更精确地控制和限制向外部暴露的接口的方式。

最后编辑于：2024.01.12 11:08:10