Detailed explanation of the use of Refs in React's three major attributes

Refs is a method used in React to obtain nodes when obtaining some state values ​​in a JSX component or a DOM. In React's official explanation, its scope of application is as follows:

• Manage focus, text selection, or media playback.
• Triggers a forced animation.
• Integrate third-party DOM libraries.
  

React documentation repeatedly emphasizes that you should not overuse refs, so when we can use DOM native objects to solve it, try not to use refs. According to the previous writing method, first give the writing method of refs in class components and function components

Class Component

In a class, there are three ways to use refs. The most commonly used one is callback.

//Directly define refs, deprecated class App extends React.PureComponent{
    changeInput = ()=>{
        const {input} = this.refs
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={"input"}/>
            </div>
        )
    }
}

//Use in callback form class App extends React.PureComponent{
    changeInput = ()=>{
        console.log(this.inputRef);
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/>
            </div>
        )
    }
}

//Use createRef
class App extends React.PureComponent{
    inputRef = React.createRef()
    changeInput = ()=>{
        console.log(this.inputRef.current);
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={this.inputRef}/>
            </div>
        )
    }
}

The above are the three ways to write Ref of class components

Functional Components

function App(){
    const inputRef = useRef("")
    return (
        <div>
            <input type="text" placeholder={"please input your value"} ref={inputRef}/>
        </div>
    )
}

Use a useRef to complete the code directly

Interview FAQ: What is the role of refs in React?

Refs are handles that React provides us with safe access to DOM elements or component instances. In a class component, React treats the first argument in the ref attribute as a handle in the DOM. In the function component, react can also get ref using the hooks api useRef (the useRef feature is often used in hooks, that is, the stored data is not refreshed as the component is refreshed, so as to write some constant amounts)

The above is the detailed content of the detailed explanation of the use of Refs, one of the three major attributes of React. For more information about Refs, one of the three major attributes of React, please pay attention to other related articles on 123WORDPRESS.COM!