This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

React Hooks: useRef; React Hooks: useRef

A,RefwithuseRefThe difference between

A Ref object is an object generated by react. createRef or by using React Hooks — useRef. A standard Ref object is of the following form:

{
    current:null
}
Copy the code

There are usually two ways to generate Ref objects. In class components, we tend to use React. CreateRef to generate Ref objects. UseRef is usually used to generate Ref objects in function components, which is one of the differences in usage between React. Create and useReact.

In a nutshell:

  • React.createRefIn theClass componentsandFunction componentThe use of
  • useRefOnly be able toFunction componentThe use of

The reasons:

The function component is refreshed as the function executes, and the react. createRef resulting Ref object cannot be saved because of repeated initialization, while the life cycle is separated by the class component

Second,RefwithuseRefWhat can you do with it

  • You can getDOMElements andDOMAttributes of an element
  • Gets an instance of a component and its methods

Note: If Ref retrieves a DOM element, getref.current is the DOM content. If you get a child component, getref.current is the child component instance

Three,RefwithuseRefThe use of

There are four ways to useRef: strings, callbacks, react. createRef, and useRef

Let’s look at them one by one:

1. Strings (not recommended)

How to create and use:

  1. Pass within the labelref="Target"defineRef
  2. throughthis.refs.Targetaccess-acquiredDOMorComponent instance
import React from 'react';
class DoRef extend React.Component {
    render() {
        return (
            <input  ref={"inputText} "/ >)}getRef() {
        console.log(this.refs.inputText)
    }
}
Copy the code

2. Callback functions

How to create and use:

  1. Pass within the labelref={ (ele) => { this.Target = ele } }defineRef
  2. throughthis.Targetaccess-acquiredDOMorComponent instance
import React from 'react';
class DoRef extend React.Component {
    render() {
        return (
            <input  ref={ (input) = >{ this.inputText = input } } />)}getRef() {
        console.log(this.inputText)
    }
}
Copy the code

3,React.createRef

How to create and use:

  1. Called within a function componentconst Target = React.creatRef(null)
  2. throughTarget.currentaccess-acquiredDOMorComponent instance
import React from 'react';
class DoRef extend React.Component {
    constructor(props) {
        super(props);
        this.inputText = React.creatRef(null);
    }
    componentDidMount() { 
        this.inputText && this.inputText.current.focus(); 
    }
    render() {
        return (
            <input  ref={inputText} />)}getRef() {
        console.log(this.inputText.current); }}Copy the code

4,useRef

How to create and use:

  1. The importuseRefhook
  2. Called within a function componentconst Target = useRef(null)
  3. throughTarget.currentaccess-acquiredDOMorComponent instance

The Ref object returned by useRef remains constant throughout the life cycle of the component and can therefore be used by functional components

import React,{useRef} from 'react';
const Example = () = > {
    const inputText = useRef(null);
    return (
        <input  ref={inputText.current} />)}Copy the code