React 组件的三大核心属性之一 refs 笔记

在 React 中，refs 是一种访问 DOM 元素或组件实例的方式。refs 可以用于直接操作 DOM 元素，或者访问组件实例的方法。refs 在某些情况下非常有用，例如，需要直接访问 DOM 元素进行动画，或者需要访问组件实例的方法。

创建 Refs

在 React 中，可以使用 React.createRef 方法创建一个 ref。然后，可以将这个 ref 附加到元素或组件上。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // 访问 DOM 元素
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

export default MyComponent;

在这个例子中，React.createRef 创建了一个 ref，并将其赋值给 this.myRef。然后，将 this.myRef 附加到 div 元素上。在 componentDidMount 生命周期方法中，可以通过 this.myRef.current 访问 div 元素。

使用 Refs 访问类组件实例

refs 也可以用于访问类组件的实例。要将 ref 附加到类组件上，需要将 ref 附加到类组件的根元素上。

import React, { Component } from 'react';

class MyChildComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // 访问 MyChildComponent 实例
  }

  render() {
    return <MyChildComponent ref={this.myRef} />;
  }
}

export default MyComponent;

在这个例子中，ref 被附加到 MyChildComponent 的根元素上。在 componentDidMount 生命周期方法中，可以通过 this.myRef.current 访问 MyChildComponent 实例。

注意事项

• 避免过度使用 Refs：过度使用 refs 可能会使组件难以理解和维护。在可能的情况下，应该使用 props 和 state 来管理组件的状态和行为。
• Refs 在函数式组件中不可用：函数式组件不能直接使用 refs，因为它们是纯函数，没有实例。但是，可以使用 useRef 钩子来在函数式组件中创建 ref。

总的来说，refs 是一种强大的工具，可以用于直接访问 DOM 元素或组件实例。然而，应该谨慎使用 refs，并尽量避免过度使用它们。