先看一个小案例，点击+1案例
第一个是使用useRef写的
第二个是使用useState写的
那么这两个有什么区别呢
点击第一个按钮
控制台打印，《这是用ref写的count: 1》
但是为什么页面显示的还是：0
区别1：渲染不同
useRef：值发生改变不会触发页面重新渲染，并且useRef的值可以在组件重新渲染时保持不变。
useState：值发生改变会使页面重新渲染，
注意：useState如果存储的是对象类型的数据，即使值发生了改变也不会渲染，因为新值和旧值的引用地址还是一样的，如果想要让他进行渲染，需要提供一个新的对象
区别2：获取数据方式不同
useRef：countRef.current。(获取数据)
useState：直接获取即可
区别3：获取的数据不同
useRef：获取的数据是最新的值
useState：获取的数据是旧值，因为useState是异步操作
接下来看一下区别3的演示
可以看到，当我点击第二个按钮时，页面渲染了，因为可以看到第二个count值，但是为什么第一个count也变成了1呢？
答：
这也验证了区别1：并且useRef的值可以在组件重新渲染时保持不变
因为我点了一下按钮1，值已经发生改变了，只是页面没有渲染，接着我点了按钮2，state的值发生改变，渲染页面，也就使count1的值也渲染了一下，
最后总结一下
当使用useState时，您可以创建和管理组件的状态。它接受一个初始值作为参数，并返回一个包含当前状态值和更新状态的函数的数组。通过调用更新状态的函数，您可以更新状态的值，并触发组件的重新渲染。
当使用useRef时，您可以创建一个可变的引用对象，用于存储和访问值。它返回一个包含.current属性的ref对象，该属性可以用来存储和访问值。与状态不同，useRef的值可以在组件重新渲染时保持不变。
总结起来，useState用于创建和管理组件的状态，而useRef用于存储和访问可变值。它们都是React中常用的钩子，用于在函数式组件中进行状态管理。
差点忘了，还有代码示例
import React, {useRef, useState} from 'react';
export default function App(props) {
const countRef = useRef(0);
const increment = () => {
countRef.current += 1;
console.log('这是用ref写的count:', countRef.current);
};
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
console.log('这是用state写的count:', count);
};
return (
<div>
<h1>这是用ref写的count: {countRef.current}</h1>
<button onClick={increment}>Increment1</button>
<hr/>
<h1>这是用state写的count: {count}</h1>
<button onClick={incrementCount}>Increment2</button>
</div>
);
}