在 React 中精通 refs：提升子组件交互的利器

2023-12-21 20:31:43

导言：

在 React 生态系统中，refs（引用）是一种强大而灵活的机制，它允许我们访问 DOM 元素或组件实例，从而增强组件之间的交互和控制。尽管 refs 经常被视为一种复杂且鲜为人知的功能，但充分掌握它将大大提升我们的 React 开发能力。

refs 的精髓：建立组件间的桥梁

refs 本质上是建立组件之间桥梁的工具。通过 refs，父组件可以访问子组件的实例，而子组件也可以访问自己的 DOM 节点。这为以下方面提供了无限可能：

获取 DOM 元素并直接与其交互
触发子组件中原本不可访问的方法或属性
在父组件中控制子组件的生命周期事件

正确的 refs 使用：避免常见陷阱

虽然 refs 非常强大，但如果使用不当也可能会带来问题。以下是一些常见的陷阱以及如何避免它们：

创建不必要的 refs： 只在真正需要时才创建 refs。滥用 refs 会导致性能问题和代码复杂性的增加。
使用 ref.current： 总是使用 ref.current 来访问 DOM 元素或组件实例。ref.current 包含指向实际 DOM 节点或组件实例的最新引用。
避免使用字符串 ref： 字符串 ref 已被废弃，请改用回调 ref 或使用 createRef() 创建 ref 对象。

解锁子组件功能：使用 refs 暴露接口

在编写通用组件时，refs 可以用来将组件的功能暴露给父组件。这对于构建可重用且灵活的代码非常有用。以下是实现此目的的一种方法：

import React, { createRef } from "react";

export const MyComponent = () => {
  const ref = createRef();

  // 定义一个将暴露给父组件的方法
  const triggerAction = () => {
    // 在这里执行操作
  };

  // 在组件中公开 ref 和方法
  return <div ref={ref} onClick={triggerAction} />;
};

在父组件中，我们可以这样访问 ref 和方法：

import MyComponent from "./MyComponent";

export const ParentComponent = () => {
  const componentRef = React.createRef();

  const handleClick = () => {
    // 触发子组件的方法
    componentRef.current.triggerAction();
  };

  return <MyComponent ref={componentRef} onClick={handleClick} />;
};

案例研究：使用 refs 改进表单验证

让我们考虑一个使用 refs 改善表单验证的示例。通过访问 DOM 元素，我们可以直接操作输入字段并提供实时的验证反馈。

import React, { createRef, useState } from "react";

export const Form = () => {
  const inputRef = createRef();
  const [isValid, setIsValid] = useState(false);

  const handleInputChange = (e) => {
    // 使用 DOM 节点进行验证
    const value = inputRef.current.value;
    setIsValid(value.length > 0);
  };

  return (
    <form>
      <input type="text" ref={inputRef} onChange={handleInputChange} />
      {isValid ? "输入有效" : "输入无效"}
    </form>
  );
};