React 基础小知识：refs 让 React 组件之间交换信息

前端

2023-10-12 18:03:08

深入了解 React refs：在组件之间架起桥梁

什么是 React refs？

在 React 中，refs（参考）充当了一种桥梁，允许我们访问组件实例或 DOM 元素的引用。这些引用可以用作多种目的，例如操纵组件、在组件之间传递数据以及执行与组件生命周期相关的任务。

创建 refs

有两种方法可以创建 refs：字符串 refs 和回调 refs。

字符串 refs

字符串 refs 是为组件元素指定一个唯一的字符串标识符的最简单方法。例如：

class MyComponent extends React.Component {
  render() {
    return <div ref="myRef"></div>;
  }
}

回调 refs

回调 refs 提供了更多的灵活性，它通过一个回调函数将组件引用分配给实例属性。例如：

class MyComponent extends React.Component {
  render() {
    return <div ref={(ref) => { this.myRef = ref; }}></div>;
  }
}

refs 的生命周期

refs 在组件生命周期中扮演着至关重要的角色。

componentDidMount ：refs 在组件挂载后初始化，我们可以在其中访问组件实例或 DOM 元素。
componentWillUnmount ：refs 在组件卸载前销毁，此时我们不能再访问它们。

refs 的常见用法

访问组件实例或 DOM 元素： refs 允许我们与组件实例交互，调用方法，更改属性或操作 DOM 元素。
在组件之间传递数据： refs 可用于在不同组件之间传递数据，例如父组件到子组件或子组件到父组件。
执行与生命周期相关的操作： refs 可以在组件生命周期的关键阶段执行特定任务，例如在挂载时初始化数据或在卸载时释放资源。

代码示例

考虑一个带有子组件的父组件，其中父组件希望访问子组件实例。我们可以使用 refs 来实现这一点：

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent ref={(ref) => { this.childRef = ref; }} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div>我是子组件！</div>;
  }
}