React Hooks的useState、useRef使用

React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写 class 的情况下使用 state 和其他 React 特性。其中，useState 和 useRef 是两个常用的 Hooks。

1. useState

useState 是一个允许你在函数组件中添加 state 的 Hook。

使用说明：

• useState 返回一个状态变量和一个设置该变量的函数。
• 如果传递给 useState 的初始值是 undefined，则返回的状态变量初始值为 undefined。
• 你可以在组件的任何地方调用 useState，但通常建议在组件的顶层调用它。

代码示例：

import React, { useState } from 'react';

function Example() {
// 声明一个初始值为 "A" 的状态变量 name
const [name, setName] = useState('A');

return (
<div>
<p>Hello, my name is {name}.</p>
<button onClick={() => setName('B')}>Change Name</button>
</div>
);
}

2. useRef

useRef 是一个可以存储任意数据类型的不可变（只读）引用（比如一个 DOM 元素或一个 React 组件）。ref 是一个响应式的引用，这意味着即使它的调用点没有发生改变，它的指向也会随着组件渲染而更新。

使用说明：

• useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数（或 undefined）。
• .current 的值在组件的整个生命周期内保持不变。
• ref 对象在组件的整个生命周期内保持不变。

代码示例：

import React, { useState, useRef } from 'react';

function Timer() {
const count = useRef(0); // 使用 useRef 存储 count 的初始值
const [seconds, setSeconds] = useState(0); // 使用 useState 来存储当前的秒数
const [countdown, setCountdown] = useState(10); // 使用 useState 来存储倒计时时间（10秒）
const interval = setInterval(() => { // 使用 setInterval 来实现倒计时功能，每秒更新一次 seconds 的值
setSeconds((seconds) => seconds + 1); // seconds 每秒自增 1，当 seconds 大于等于 countdown 时，停止倒计时并清除 interval 以清除倒计时动画
if (seconds >= countdown) { // 当 seconds 大于等于 countdown 时，清除 interval 并调用 clearTimeout 来停止倒计时动画并显示“Game Over”信息，然后调用 setCountdown 来重置倒计时时间（重新开始倒计时）和调用 setSeconds 来重置 seconds 的值（重新开始计时）
clearInterval(interval); // 当倒计时结束后，清除 interval 以停止倒计时动画并显示“Game Over”信息，然后调用 setCountdown 来重置倒计时时间（重新开始倒计时）和调用 setSeconds 来重置 seconds 的值（重新开始计时）
} else { // 当 seconds 小于 countdown 时，继续倒计时动画并显示当前的秒数和剩余的倒计时时间（每秒更新一次）
count.current = seconds; // 将 seconds 的值赋给 ref 的 current 属性以在父组件中通过 useEffect 来使用这个值并在控制台打印这个值，然后通过 countdownRef.current = countdown; 将 countdown 的值赋给 ref 的 current 属性以在父组件中通过 useEffect 来使用这个值并在控制台打印这个值，这样就可以在父组件中获取到当前秒数和剩余的倒计时时间并在控制台打印它们了。注意这里使用 ref 来存储当前的秒数和剩余的倒计时时间是因为它们需要在父组件中通过 useEffect 来使用并在控制台打印它们，而 ref 是唯一可以在函数组件和父组件之间共享数据的 Hook。