React ref usage examples

React ref usage examples

I have been writing react for a while, and 99% of the time I have been writing about state, prop, useState, and useEffect. I am particularly unfamiliar with ref. A few days ago, I made a requirement and wanted to use ref to implement a state value of a child component from a parent component, but it failed. I would like to organize some content related to ref.

What is ref

Official website introduction:

In typical React data flow, props are the only way for parent components to interact with child components. To modify a child component, you need to re-render it with the new props. However, there may be cases where you need to force modifications to subcomponents outside of the typical data flow. The modified child component may be an instance of a React component or a DOM element. For both cases, React provides a solution, which is to use ref to get the dom or component instance.

How to use ref

Place it on the DOM element

This is the most direct use of ref

export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }
  componentDidMount() {
    console.log(this.myRef)
  }
  render() {
    return <div ref={this.myRef}>test</div>
  }
}

Print and see what ref is

It can be seen that ref.current gets the DOM element, so we can implement some functions of the DOM element itself, such as input focus:

export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }

  onClick = () => {
    this.myRef.current.focus()
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>Focus</button>
        <input ref={this.myRef} />
      </div>
    )
  }
}

The official website also provides a form of ref callback:

export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = null
  }

  onClick = () => {
    this.myRef.focus()
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>Focus</button>
        <input ref={ele => this.myRef = ele} /> // ele here is the dom element</div>
    )
  }
}

Place it on the class component

In fact, components are similar to native DOM. They are also some elements with their own UI and some functions. So by putting ref on a component, you can also get an example of the component.

// Child component class Child extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'xx'
    }
  }
  render() {
    return <div>child element {this.state.name}</div>
  }
}

export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }

  componentDidMount() {
    console.log(this.myRef)
  }

  render() {
    return (
     <Child ref={this.myRef} />
    )
  }
}

Now that we can get the instance of the child component, we can operate the child component. For example, as mentioned at the beginning of the article, I want to get some status values ​​of the child component in the parent component.

class Child extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  
  onClick = () => {
    this.setState({count: this.state.count+1})
  }

  render() {
    return <button onClick={this.onClick}>Click +1: {this.state.count}</button>
  }
}

export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }

  onClick = () => {
    console.log(this.myRef.current.state.count) // Get the state value of the child component}


  render() {
    return (
      <div>
        <button onClick={this.onClick}>Get the number of clicks on the subcomponent</button>
        <Child ref={this.myRef} /> // ref gets the child component instance</div>
    )
  }
}

Since I can get the value, I can also use the function to modify the child component

class Child extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'xx'
    }
  }
  changeName = () => {
    this.setState({name: 'ww'})
  }
  render() {
    return <div>child element {this.state.name}</div>
  }
}

export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }

  onClick = () => {
    this.myRef.current.changeName() // The parent component reaches into the child component}

  render() {
    return (
      <div>
        <button onClick={this.onClick}>Change the state of the child component</button>
        <Child ref={this.myRef} />
      </div>
    )
  }
}

Of course, this example is not appropriate. If the parent component wants to change the state of the child component, it should promote the state to the parent component and then pass it in as props of the child component.
Mainly, ref provides a way to bypass props to achieve parent-child component communication.

Put it on the function component

This is the mistake I made when writing the requirements at the beginning of the article. Ref cannot be placed on function components because function components have no instances.

const Child = () => {
  return <div>child component</div>
}

export const Demo = () => {
  const myRef = useRef() // You can create ref in a function component

  useEffect(() => {
    console.log(myRef)
  }, [])

  return <Child ref={myRef} /> // But it is invalid when placed on a function component}

So function components can’t use ref? Of course not, haha. We can wrap the function component with forwardRef.

const Child = (props, ref) => { // After packaging, in addition to the original props, ref is also passed in return <div ref={ref}>child component</div> // Still have to be mounted on the dom}

const ProChild = React.forwardRef(Child) // The key point is here export const Demo = () => {
  const myRef = useRef()

  useEffect(() => {
    console.log(myRef)
  }, [])

  return <ProChild ref={myRef} />
}

Here is a tip from the official website:

Since function components can also use ref, we use function components to implement the parent component to retrieve the child component's data. However, it can be seen that after wrapping with forwardRef, the ref still needs to be mounted on the dom or class component. If I only want to mount the data, I also need to use useImperativeHandle.

const Child = (props, ref) => {
  const [count, setCount] = useState(0)

  useImperativeHandle(
    ref,
    () => ({ // This is the data exposed to the external ref getVal: ()=> count
    }),
    [count],
  )

  const onClick = () => {
    setCount(pre => pre+1)
  }
  return <button onClick={onClick}>Click +1: {count}</button>
}

const ProChild = React.forwardRef(Child)

export const Demo = () => {
  const myRef = useRef()

  const onClick = () => {
    console.log(myRef.current.getVal()) // Get the value of the child component}

  return <><button onClick={onClick}>Get the number of clicks on the child component</button><ProChild ref={myRef} /></>
}

So far, the problems left when doing the demand have been solved✅

Summarize

Finally, it needs to be emphasized that in the scenario where the parent component obtains the status of the child component, it is generally communicated by state promotion + callback, and the demand is ultimately implemented in this way. The reason why I wanted to use ref at the beginning was that I thought that after the status was promoted, the change of the child component would cause the parent component to re-render, but I just wanted to get the data without causing rendering.
I told the master about my thoughts when writing the requirements, and the master's opinions are as follows:

  • Prioritize status improvement
  • If there are performance issues, consider state improvement + memo
  • If you don't want to add memo to multiple components, you should consider introducing redux/mobx
  • If introducing redux/mobx is a cost, then ref is not impossible hahahaha

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

You may also be interested in:
  • How to use React forwardRef and what to note
  • The complete usage of setup, ref, and reactive in Vue3 combination API
  • How to deeply understand React's ref attribute
  • Detailed explanation of the use of Refs in React's three major attributes
  • Specific use of useRef in React
  • Detailed explanation of how to use Ref in React
  • Detailed explanation of the use of react-refetch
  • Learn two demo examples of ref in React
  • Tutorial on using refs in React
  • Detailed explanation of the use of React component refs
  • RefreshContorl pull-down refresh usage in React Native
  • Detailed explanation of cross-usage of Ref in React

<<:  The difference between KEY, PRIMARY KEY, UNIQUE KEY, and INDEX in MySQL

>>:  How to install Docker on Raspberry Pi

Recommend

Understanding and application analysis of mysql pessimistic locking and optimistic locking

This article uses examples to describe MySQL pess...

How to use async and await correctly in JS loops

Table of contents Overview (Loop Mode - Common) D...

Complete code for implementing the popular astronaut watch face based on JavaScript

1. Effect display An astronaut watch face written...

Implementation code of jquery step progress axis plug-in

A jQuery plugin every day - step progress axis st...

MySQL index coverage example analysis

This article describes MySQL index coverage with ...

Design of pop-up windows and floating layers in web design

In the trend of gradual transition from tradition...

Use the vue-element-admin framework to dynamically obtain the menu function from the backend

Table of contents 2. Detailed explanation 2.1. Ad...

Solution to the failure of MySQL service startup during MySQL 5.7.18 installation

MySQL is a very powerful relational database. How...

Website User Experience Design (UE)

I just saw a post titled "Flow Theory and Des...

Perfect solution to the problem of webpack packaging css background image path

Inside the style tag of the vue component, there ...

Docker learning method steps to build ActiveMQ message service

Preface ActiveMQ is the most popular and powerful...

Detailed explanation of the payment function code of the Vue project

1. Alipay method: Alipay method: Click Alipay to ...

WeChat applet implements video player sending bullet screen

This article shares the specific code for WeChat ...

How to find websites with SQL injection (must read)

Method 1: Use Google advanced search, for example...

Various methods to implement the prompt function of text box in html

You can use the attribute in HTML5 <input="...