[toc]
1. useState与useRef区别
useState：
useState是用来在函数组件中添加状态的 Hook。- 它返回一个数组，包含两个元素：当前状态值和一个更新该状态的函数。
- 每次状态更新后，组件都会重新渲染。
useRef：
useRef用于在函数组件中存储任何可变值，通常用于存储 DOM 节点的引用或内部状态。- 它返回一个
ref对象，该对象在组件的整个生命周期内持续存在，不会在每次渲染时重新创建。
ref 和 state 的不同之处
也许你觉得 ref 似乎没有 state 那样“严格” —— 例如，你可以改变它们而非总是必须使用 state 设置函数。但在大多数情况下，我们建议你使用 state。ref 是一种“脱围机制”，你并不会经常用到它。 以下是 state 和 ref 的对比：
| ref | state |
|---|---|
useRef(initialValue)返回 { current: initialValue } | useState(initialValue) 返回 state 变量的当前值和一个 state 设置函数 ( [value, setValue]) |
| 更改时不会触发重新渲染 | 更改时触发重新渲染。 |
可变 —— 你可以在渲染过程之外修改和更新 current 的值。 | “不可变” —— 你必须使用 state 设置函数来修改 state 变量，从而排队重新渲染。 |
你不应在渲染期间读取（或写入） current 值。 | 你可以随时读取 state。但是，每次渲染都有自己不变的 state 快照。 |
2. 何时使用useRef
DOM 引用：
- 当你需要直接访问 DOM 节点时，比如获取输入框的焦点、测量元素的大小等，
useRef可以存储这些 DOM 节点的引用。
保存可变值：
- 当你需要在组件的多次渲染之间保存一个可变值，且这个值不应该触发组件的重新渲染时。
动画和滚动位置：
- 在动画或滚动位置的场景中，你可能需要保存一些状态，这些状态不需要触发组件的重新渲染。
3. 挂载和卸载时调用的方法
useEffect 钩子
useEffect 是React中用于处理副作用的钩子，它可以用来模拟类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法。
- 挂载阶段（Mounting）
- 在组件挂载时执行代码，类似于
componentDidMount。 - 可以通过传递一个空依赖数组
[]给useEffect来实现，这样useEffect只在组件挂载时执行一次。
- 在组件挂载时执行代码，类似于
- 卸载阶段（Unmounting）
- 在组件卸载时执行清理代码，类似于
componentWillUnmount。 - 可以通过在
useEffect中返回一个函数来实现，这个函数将在组件卸载前执行。
- 在组件卸载时执行清理代码，类似于
示例：
react
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [counter, setCounter] = useState(0);
useEffect(() => {
// 挂载阶段：执行副作用操作
console.log('组件已挂载');
// 执行DOM操作或发起网络请求等
// 返回一个函数，用于卸载阶段的清理操作
return () => {
// 卸载阶段：执行清理操作
console.log('组件即将卸载');
// 取消网络请求、清除定时器等
};
}, []); // 空依赖数组表示这个effect只在挂载和卸载时运行
// 你也可以根据需要添加依赖项，以便在依赖项变化时重新执行副作用
useEffect(() => {
// 当 counter 变化时执行
console.log(`counter更新了，新的值为：${counter}`);
}, [counter]); // 依赖数组包含counter
return <div>{counter}</div>;
}- 第一个
useEffect钩子用于处理组件挂载和卸载阶段的操作。通过传递一个空依赖数组[]，确保这个useEffect只在组件挂载时执行一次，并在卸载时执行返回的清理函数。 - 第二个
useEffect钩子用于处理counter状态变化时的操作。通过将counter作为依赖项，确保每当counter变化时，这个useEffect都会重新执行。