Interviewer: Tell me about your understanding of React refs? Application scenario?

1. Refs

RefsIn computers, it is called Resilient File System (English: Resilient File System, ReFS for short)

Reactin Refsprovides a way that allows us to access DOM nodes or elements render created in the methodReact

The essence is ReactDOM.render()the returned component instance, if it is a rendered component, it will return the component instance, if it is rendered, domit will return the specific domnode

2. How to use

There are three forms created ref:

Pass in a string, and get the corresponding element through the format of the string passed in this.refs.
Pass in the object, the object is created by React.createRef(), and the current attribute in the created object is obtained when using it, which is the corresponding element
Pass in a function, which will call back when the DOM is mounted. This function will pass in an element object, which can be saved by itself. When using it, just get the previously saved element object directly.
Pass in the hook, the hook is created by useRef(), and the current attribute of the generated hook object is the corresponding element when used

incoming string

refOnly need to attribute in the corresponding element or component

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

The way to access the current node is as follows:

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

incoming object

refsBy React.createRef()creating and then refadding attributes to Reactthe element, as follows:

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

When refa is passed to renderan element in a , a reference to the node can be accessed in the attribute refof thecurrent

const node = this.myRef.current;

pass in function

When refpassed in as a function, during the rendering process, the callback function parameter will pass in an element object, and then save the object through the instance

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

To get refan object, you only need to pass through the previously stored object

const node = this.myref

incoming hook

By useRefcreating a ref, the overall usage is React.createRefconsistent with

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

Obtaining refproperties is also through the properties hookof the objectcurrent

const node = myref.current;

The above three cases are refattributes used on native HTMLelements. If refthe set component is a class component, refthe object receives the mounted instance of the component

Note that properties cannot be used on function components refbecause they do not have instances

3. Application scenarios

In some cases, we will refsupdate the component by using it, but this method is not recommended. In more cases, we use propsthe statemethod of re-rendering child elements

Excessive use will expose refsthe instance or structure of the component , which violates the principle of component encapsulationDOM

For example, avoid exposing and methods in Dialogcomponents , it is better to pass propsopen()close()isOpen

But the following scenarios are refsvery useful:

Focus control, content selection, and control of Dom elements
Content setting and media playback of Dom elements
Operations on Dom elements and operations on component instances
Integrate third-party DOM libraries

references

https://zh-hans.reactjs.org/docs/refs-and-the-dom.html
https://segmentfault.com/a/1190000020842342