ref New and old version applications

1. What is it#

Refs is called Resilient File System (ReFS) in computers.

In React, Refs provides a way to access DOM nodes or React elements created in the render method.

It is essentially a component instance returned by ReactDOM.render(). If it is rendering a component, it returns the component instance. If it is rendering a dom, it returns the specific dom node.

2. How to use#

There are three ways to create a ref:

Pass a string and access the corresponding element through this.refs in the specified format.
Pass an object created using React.createRef(), and access the element through the current property of the created object.
Pass a function that will be called back when the DOM is mounted. This function will be passed an element object that can be saved and accessed directly when needed.
Pass a hook created using useRef(), and access the element through the current property of the generated hook object.

Pass a string#

Just add the ref attribute to the corresponding element or component.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref="myref" />;
  }
}

Access the current node as follows:

this.refs.myref.innerHTML = "hello";

Pass an object#

Create a ref using React.createRef() and add the ref attribute to the React element as follows:

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

When the ref is passed to an element in render, the reference to that node can be accessed in the current property of the ref.

const node = this.myRef.current;

Pass a function#

When the ref is passed as a function, during the rendering process, the callback function will be passed an element object, which can be saved using the instance. When accessing, simply use the previously saved element object.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={element => this.myref = element} />;
  }
}

To get the ref object, simply use the previously stored object.

const node = this.myref

Pass a hook#

Create a ref using useRef(), and the overall usage is the same as React.createRef.

function App(props) {
  const myref = useRef()
  return (
    <>
      <div ref={myref}></div>
    </>
  )
}

To access the ref attribute, use the current property of the hook object.

const node = myref.current;

The above three cases are all for the ref attribute used on native HTML elements. If the ref is set to a class component, the ref object received is the mounted instance of the component.

Note that the ref attribute cannot be used on function components because they do not have instances.

3. Application scenarios#

In some cases, we use refs to update components, but this approach is not recommended. In most cases, we use props and state to re-render child elements.

Using refs excessively exposes the component instance or DOM structure, violating the principle of component encapsulation.

For example, avoid exposing open() and close() methods in the Dialog component, and it is better to pass the isOpen attribute.

But the following scenarios are very useful for using refs:

Control focus, content selection, and manipulation of DOM elements
Setting content and media playback of DOM elements
Manipulating DOM elements and component instances
Integrating third-party DOM libraries