1.什么是钩子（hooks）
钩子（hooks）是React中一种特殊的函数，可以让你在函数式组件中使用一些类组件中才有的特性，比如状态管理、副作用、上下文等。钩子（hooks）有很多种类，比如useState、useEffect、useRef等，每种钩子都有自己的用法和规则。使用钩子（hooks）可以让你的组件更简洁和可复用。
2.useRef和useState是什么
useRef是一个钩子（hook），可以让你创建一个可变的引用（reference），它在组件的整个生命周期中保持不变。useRef返回一个对象，它有一个current属性，你可以把任何值赋给它。useRef主要用于访问和操作DOM元素，或者存储一些不需要触发重新渲染的可变值。当你改变useRef对象的current属性时，React不会重新渲染你的组件。
useState是一个钩子（hook），可以让你在函数式组件中管理状态（state）。它返回一个数组，包含两个元素：当前状态值和一个更新状态的函数。你可以通过调用更新状态的函数来改变状态值，并且触发组件重新渲染。useState主要用于管理组件内部的一些变化的数据，比如计数器、开关、表单输入等。
3.useRef理解
useRef钩子（hook）在React中创建一个可变的引用（reference），它在组件的渲染周期中保持不变。与useState不同，它管理状态并触发重新渲染，useRef主要用于访问和操作DOM或者存储可变的值，它们不会触发重新渲染。它返回一个可变的对象，有一个current属性。
例子1：访问DOM元素
假设我们想要在点击一个按钮时，聚焦到一个输入框。我们可以使用useRef来实现这个功能：
import React, { useRef } from ‘react’;
function MyComponent() { const inputRef = useRef(null);
const handleClick = () => { inputRef.current.focus(); };
return ( <div> <input ref={inputRef} /> <button onClick={handleClick}>Focus Input</button> </div> ); }在上面的例子中，我们使用useRef创建了一个引用（ref），并把它赋值给了inputRef变量。我们把inputRef传递给了输入框的ref属性，这样就可以访问到输入框的DOM节点。当按钮被点击时，handleClick函数被执行，调用了inputRef.current.focus()来聚焦到输入框。
ref属性是React中一种特殊的属性，可以让你存储一个引用（reference）到一个特定的React元素或组件，它是由组件的render()函数返回的。这在你需要在组件内部访问一些元素或组件时很有用。
ref属性是通过React.createRef()方法创建的，它可以像其他属性一样附加到一个元素上。
例如，假设我们有一个类组件，它有一个输入框和一个按钮。我们想要在点击按钮时获取输入框的值。我们可以使用ref属性来实现这个功能：
import React, { Component } from ‘react’;
class MyComponent extends Component { constructor(props) { super(props); // 创建一个ref对象 this.inputRef = React.createRef(); }
handleClick = () => { // 通过ref对象的current属性访问输入框的DOM节点 const inputValue = this.inputRef.current.value; alert(inputValue); };
render() { return ( <div> <input ref={this.inputRef} /> <button onClick={this.handleClick}>Get Value</button> </div> ); } }在上面的例子中，我们在构造函数中使用React.createRef()方法创建了一个ref对象，并把它赋值给了this.inputRef变量。我们把this.inputRef传递给了输入框的ref属性，这样就可以访问到输入框的DOM节点。当按钮被点击时，handleClick方法被执行，通过this.inputRef.current.value获取了输入框的值，并弹出一个提示框显示它。
4.useState理解
useState钩子（hook）用于在函数式组件中管理状态（state）。它允许你创建一些可以被更新和触发重新渲染的变量。useState钩子（hook）返回一个数组，包含两个元素：当前状态值和一个更新状态的函数。
例子2：管理一个计数器
让我们使用useState来创建一个简单的计数器组件：
import React, { useState } from ‘react’;
function Counter() { const [count, setCount] = useState(0);
const increment = () => { setCount(count + 1); };
return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> </div> ); }
在上面的代码中，我们使用了数组解构的语法来赋值count状态变量和setCount更新状态的函数。count的初始值被设置为0，使用useState(0)。当按钮被点击时，increment函数被调用，更新了count状态，加上了1。结果，组件重新渲染，显示了更新后的count值。
5.比较useRef和useState
虽然useRef和useState都可以存储值，但是它们有不同的目的：
管理状态：useState是为了在组件中管理状态而设计的。它会在状态更新时触发重新渲染，确保UI反映最新的值。
访问和操作DOM：useRef主要用于与DOM交互，比如获取输入框的值或者聚焦到元素上。
如果你需要存储一些不影响渲染的数据，比如一个计时器的ID，一个DOM元素的引用，或者一个函数的引用，你可以使用useRef。useRef会返回一个对象，它有一个current属性，你可以把任何值赋给它。当你改变useRef对象的current属性时，React不会重新渲染你的组件。
如果你需要存储一些影响渲染的数据，比如一个计数器的值，一个开关的状态，或者一个表单输入的内容，你可以使用useState。useState会返回一个数组，包含当前状态值和一个更新状态的函数。当你调用更新状态的函数时，React会重新渲染你的组件，并且显示最新的状态值。