ReactJS 中 refs 的意义是什么？

在 ReactJS 中，ref 是一种引用机制，用于获取组件实例或 DOM 元素的句柄。它提供了一种直接访问 DOM 元素或组件实例的方式，使得我们能够在 React 组件中直接操作 DOM 或组件的方法。

为什么要使用 refs？

• 直接操作 DOM：在某些情况下，我们需要直接访问 DOM 元素，例如获取其大小、位置、滚动等信息，或者在特定场景下直接修改 DOM。使用 ref 可以让我们直接通过引用来访问 DOM 元素，而不需要额外的选择器或查找操作。

• 调用组件方法：有时候，我们需要从父组件调用子组件的一些方法。通过创建一个 ref 并将其挂载到子组件上，父组件就可以通过 ref 引用来调用子组件的方法，实现父子组件之间的通信。

如何使用 refs？

1. 创建 ref：在 React 组件中，我们可以使用 React.createRef() 方法来创建一个 ref。

import React from 'react';

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

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

2. 访问 DOM 元素：通过 this.myRef.current 可以访问到 ref 所对应的 DOM 元素。

componentDidMount() {
  const domElement = this.myRef.current;
  // 对 DOM 元素进行操作
}

3. 调用组件方法：如果将 ref 挂载到组件实例上，那么我们可以通过 this.myRef.current 来访问组件实例，从而调用其方法。

class ChildComponent extends React.Component {
  doSomething() {
    // 执行一些操作
  }

  render() {
    return <div>Hello, Child Component!</div>;
  }
}

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

  componentDidMount() {
    this.childRef.current.doSomething(); // 调用子组件的方法
  }

  render() {
    return <ChildComponent ref={this.childRef} />;
  }
}

注意事项

• 在函数式组件中，可以使用 useRef hook 来创建和访问 ref。

• 当 ref 被挂载或卸载时，React 会将其作为普通属性传递给组件实例的 render 方法。因此，在 render 方法中修改 ref 会产生一些意外行为。

• 尽可能避免滥用 ref，因为它会破坏组件的封装性和可维护性。只在必要的情况下使用 ref，并且尽量将其操作封装到组件内部。

更多关于 ref 的信息，请参考 React 官方文档。