useRef 还是 useState，哪个更好？

大家好！
本文将介绍 useRef 和 useState 钩子的概念、它们的区别以及各自的使用时机。
本文中的代码示例仅涉及函数式组件，但大部分区别和用法都涵盖了类组件和函数式组件。

也请查看我的博客！

useState 钩子

useState 是一个内置的 React Hook，允许你将信息作为状态存储在变量中。它允许你将 React 状态添加到函数式组件中。
在下面的示例中，useState()声明了状态变量，而值存储在 count 变量中。setCount是用于更新此值的函数。

//import useState from react

import React, { useState } from 'react';

function Count() {

  // Declare a new state variable called count

  const [count, setCount] = useState(0);

useRef 钩子

useRef hook 是一个内置的 React hook，它接受一个参数作为初始值，并返回一个引用或持久化的可变值。这个引用（简称 ref）包含可以使用 current 属性检索的值。
我们还可以将用户输入存储在 ref 中，并像这样显示收集到的数据：

//import useRef hook

import React, { useRef } from "react"

export default function App() {

  //create a variable to store the reference 

  const nameRef = useRef();

  function handleSubmit(e) {

    //prevent page from reloading on submit

    e.preventDefault()

    //output the name

    console.log(nameRef.current.value)

  }

  return (

    <div className="container">

      <form onSubmit={handleSubmit}>

        <div className="input_group">

          <label>Name</label>

          <input type="text" ref={nameRef}/>

        </div>

        <input type="submit"/>

      </form>

    </div>

  )

}

useRef 与 useState 对比

1. 与状态不同，引用或 ref 中存储的数据或值即使在组件重新渲染后也保持不变。因此，引用不会影响组件渲染，但状态会。

2. useState 返回两个属性或一个数组。一个是值或状态，另一个是用于更新状态的函数。而 useRef 只返回一个值，即实际存储的数据。

3. 当引用值发生变化时，它会被更新，而无需刷新或重新渲染。然而在 useState 中，组件必须再次渲染才能更新状态或其值。

何时使用 Refs 和 States

在获取用户输入、DOM 元素属性以及存储持续更新的值时，Refs 非常有用。
但是，如果您要存储组件相关信息或使用组件中的方法，那么状态是最佳选择。

所以总而言之，这两种钩子都有各自的优缺点，需要根据情况和用途来使用。

感谢阅读！
注意！：这里可能还有很多内容可以提及，但简而言之，这些是最重要的区别。

关于 useRef 的完整教程已上传至 Hubpages

查看我的博客！