Shulou(Shulou.com)06/02 Report--

Editor to share with you what is the use of useRef and useState in JavaScript, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1 、 useState hook

UseState is a built-in React hook that allows you to store information in variables as states. It allows you to add React status to functional components. In the following example, useState () declares a state variable, while the value is stored in the count variable. SetCount is the function used to update this value.

/ / Import useStateimport React from react, {useState} from 'react';function Count () {/ / declare a new state variable named count const [count, setCount] = useState (0); 2. UseRef hook

UseRef hook is a built-in React hook that takes a parameter or parameter as its initial value and returns a reference or persistent variable value. This reference, or ref for short, contains values that can be retrieved using the current property.

We can also store user input in refs and display the collected data, as shown below:

/ / Import useRef hookimport React, {useRef} from "react" export default function App () {/ / create a variable to store the reference const nameRef = useRef () Function handleSubmit (e) {/ / prevent the page from reloading e.preventDefault () / / output name console.log (nameRef.current.value)} return (Name)} 3, useRef and useState on submission

Unlike the state, the data or values stored in the reference or reference remain unchanged, even after the component is re-rendered. Therefore, references do not affect component rendering, but state does.

UseState returns 2 properties or an array. One is a value or state, and the other is a function that updates the state. By contrast, useRef returns only one value, the actual stored data.

When the reference value changes, it can be updated without refreshing or re-rendering. In useState, however, the component must render again to update the state or its value.

4. When to use Refs and States

Refs is useful for getting user input, DOM element attributes, and storing constantly updated values. However, if you want to store information about a component or use methods in a component, states is the best choice.

So all in all, these two hook have their own advantages and disadvantages and will be used on a case-by-case basis.

The above is all the content of the article "what is the use of useRef and useState in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.