hooks series four: useRefs

join us!

16103bf9a830b6 " , to provide front-end developers with technical information and a series of basic articles. For a better user experience, please go to our official website novices (16103bf9a830c0 https://xhs-rookies.com/ ) to learn and get the latest articles in time.

"Code tailor" , if you are interested in our article or want to make some suggestions, follow "Novices of Xiaohe Mountain" , contact us, you can also watch it on WeChat Our article. Every suggestion or approval is a great encouragement to us!

Preface

In this article, our main purpose is to understand the use of useRefs

useRefs

definition

useRef returns a variable ref object whose .current attribute is initialized to the passed parameter ( initialValue ). The returned ref object remains unchanged during the entire life cycle of the component.

const refContainer = useRef(initialValue)

We all know that React has provided a API createRef , and its function is also to create a ref , so what is the meaning of useRefs Hook What is the difference between them?

Features of useRef

useRef a very important feature is: useref returned ref the object is variable. As stated in the official website documentation, it is like a variable, like a "box" that can hold a variable value.

We already know that the createRef object returned by ref will return a new reference every time it is rendered, and useRef will return the same reference , as the definition says, the returned ref object is in the entire life cycle of the component constant. This is also useRef can store a variable value in its .current

Maybe this is more difficult to understand, so let's use an example to understand:

function about() {
  const [count, addCount] = useState(0)
  const refForUseRef = useRef()
  const refForCreateRef = createRef()

  if (!refForUseRef.current) {
    // 如果不存在则赋值
    refForUseRef.current = count
  }
  if (!refForCreateRef.current) {
    refForCreateRef.current = count
  }

  return (
    <>
      <div>现在count的值为：{count}</div>
      <div>refForUseRef的值为：{refForUseRef.current}</div>
      <div>refForCreateRef的值为：{refForCreateRef.current}</div>
      <button onClick={() => addCount((val) => val + 1)}>点击+1</button>
    </>
  )
}

Look at the results, even if re-rendering components, due refForUseRef value has always existed, it can not re-assignments, which is why, useRef returned to ref references are the same, and remains unchanged throughout the life cycle.

The role of useRef in Hook

We all know that the appearance of Hook Class some of the features of the 06103bf9a83526 component in the function component. We need to pay attention to one thing. There is a concept in the Class instance variable , so the function component Hook Is it similar to an instance variable?

The answer is yes, not only can useRef Hook DOM refs , it also has an important role, which is to accommodate an arbitrary value Class , which is also the feature mentioned above.

Let's use an example to feel the charm of using the function component of useRef

Experience useRef with examples

Function components that do not use useRef

function about() {
  const [count, addCount] = useState(0)

  function handleAlertClick() {
    setTimeout(() => {
      alert('弹框的count值:' + count)
    }, 2000)
  }

  return (
    <div>
      <div>现在count的值为：{count}</div>
      <button onClick={() => addCount((val) => val + 1)}>点击+1</button>
      <button onClick={() => handleAlertClick()}>展示弹框</button>
    </div>
  )
}

Observing the effect of this example, we can find that the count in the bullet box is the value when the button to display the bullet box is clicked, not the real-time status of count

In fact, when we update the state, React will re-render the component, count state every time it is rendered, and re-render a handleAlertClick function. Each handleAlertClick has its own count . So every time the pop-up box shows the value count

How to make the value in the bullet box display the count value in real time?

useRef that we have been discussing is used, just look at the example:

function about() {
  const [count, addCount] = useState(0)
  const refForUseRef = useRef(count)

  useEffect(() => {
    refForUseRef.current = count
  })

  function handleAlertClick() {
    setTimeout(() => {
      alert('弹框的count值:' + refForUseRef.current)
    }, 2000)
  }

  return (
    <div>
      <div>现在count的值为：{count}</div>
      <div>refForUseRef的值为：{refForUseRef.current}</div>
      <button onClick={() => addCount((val) => val + 1)}>点击+1</button>
      <button onClick={() => handleAlertClick()}>展示弹框</button>
    </div>
  )
}

Because useRef each will return a reference to the same, so useEffect changes in time, in alert will also be modified in this way the child, when you can click on the pop-up real-time count up.

In this example, count is similar to the instance variable in the Class component. useRef lets us complete some Class component in the function component.

Summarize

Through this article, we learned that React Hook us a hook useRef ref object returned by it remains unchanged throughout the life cycle of the component. Let us also save some instances Class Attributes have brought many possibilities for our development. In addition to these novel features, don’t forget that ref starts to get the function of DOM useRef also applicable to 06103bf9a83832.

Preview of the next section

In the next section, we will introduce useCallBack to everyone, so stay tuned!