Analysis of ref usage in react

what is ref

Components are not real DOM nodes. In react development, the official does not recommend directly operating the native DOM. A component's DOM node is a data structure that exists in memory, called a virtual DOM. If you need to get the real DOM node from the component, you need to officially provide the ref attribute.React provides refs for accessing DOM elements created in the render method or React component instances.
There are three types of ref, we will learn two here first.

string type

Look at the following small example: Clicking the button can assign the value of the input box to the following p tag

import React, {
    
     Component } from 'react'

export class App extends Component {
    
    
    render() {
    
    
        return (
            <div>
                <input type='text' ref="haha" />
                <button onClick={
    
    this.getText}>点击</button>
                <p ref="user">user</p>
            </div>
        )
    }
    getText = () => {
    
    
        console.log(this.refs.haha.value)
        const user = this.refs.haha.value
        this.refs.user.innerHTML = user
    }
}

export default App

Here we use ref to obtain the dom node for operation, and print this.refs after inputting the input data:
you can see that the data of the input box is this.refs.haha.value,

but this string type method has been eliminated. see the next

createRef create

First, import it at the top of the page, and import PureComponent here, because the following example will use it

import React, {
    
     createRef, PureComponent } from 'react'

Writing one:

1. Define this.headerRefs = createRef() directly in the constructor
2. Then bind ref on the component you need to use:

3. In the click time of the button, the current attribute is used to obtain the DOM node or component as an instance, which is printed here

export class App extends PureComponent {
    
    
    constructor() {
    
    
        super()
        this.headerRefs = createRef()
    }
    render() {
    
    
        return (
            <div>App Page
                <Header ref={
    
    this.headerRefs}/>
                <button onClick={
    
    this.getText}>点击获取</button>
            </div>
        )
    }
    getText = () => {
    
    
        // 通过current属性去获取DOM节点或者组件是实例
        console.log(this.headerRefs.current.state.name)
  
    }
}

class Header extends PureComponent {
    
    
    state = {
    
    name: 'hello react'}
    render() {
    
    
        return (<div>header Component</div>)
    }
}

export default App

The function is implemented, but it is a bit troublesome to implement in the constructor. Here is another way of writing:

Writing two:

Display the input content to the p tag
1. Use the format of headerRefs = createRef() to create refs directly
2. Bind the components to be used < Header ref={this.headerRefs}/>
3. Use this.userRefs .current.innerHTML = this.inputRefs.current.value completes the requirement

export class App extends PureComponent {
    
    

    headerRefs = createRef()
    inputRefs = createRef()
    userRefs = createRef()
    render() {
    
    
        return (
            <div>App Page
                <Header ref={
    
    this.headerRefs}/>
                <input type='text' ref={
    
    this.inputRefs} />
                <p ref={
    
    this.userRefs}>user</p>
                <button onClick={
    
    this.getText}>点击获取</button>
            </div>
        )
    }
    getText = () => {
    
    
        console.log(this.headerRefs.current.state.name)
        console.log(this.inputRefs)
        console.log(this.userRefs)
        this.userRefs.current.innerHTML = this.inputRefs.current.value
    }
}

class Header extends PureComponent {
    
    
    state = {
    
    name: 'hello react'}
    render() {
    
    
        return (<div>header Component</div>)
    }
}

export default App

Check the effect: