react中useRef 的使用
`useRef` 是 React 提供的一个 Hook，它可以用于在函数组件中存储可变值，并且在组件重新渲染时保持不变。`useRef` 的使用场景包括但不限于：
1. 访问 DOM 元素：可以使用 `useRef` 来获取并操作 DOM 元素，比如设置焦点、测量元素尺寸等。
2. 存储任意可变值：可以使用 `useRef` 来存储任意可变值，而不触发组件的重新渲染。
3. 缓存上一次的值：可以使用 `useRef` 来缓存上一次渲染时的值，比如在 `useEffect` 中对比前后状态的变化。
4. 在自定义 Hook 中共享数据：可以使用 `useRef` 在自定义 Hook 中共享数据，使得多个组件可以共享同一个数据源。
举个例子，假设我们有一个需要在用户点击按钮后自动聚焦的输入框。我们可以使用 `useRef` 来实现这个功能：
```jsx
import React, { useRef } from 'react';
function AutoFocusInput() {
const inputRef = useRef(null);
const handleButtonClick = () => {
// 点击按钮后自动聚焦输入框
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleButtonClick}>聚焦输入框</button>
</div>
);
}
export default AutoFocusInput;
```
在这个例子中，我们创建了一个名为 `inputRef` 的 ref 对象，并将其赋给输入框的 `ref` 属性。当用户点击按钮时，`handleButtonClick` 函数会调用 `inputRef.current.focus()` 来使输入框获得焦点。这就是 `useRef` 在访问 DOM 元素时的一个典型应用场景。
******************分隔线*****************************
当需要在多个组件之间共享数据时，可以使用自定义 Hook 结合 `useRef` 来实现这一目的。下面是一个简单的例子，假设我们想要在多个组件之间共享一个计数器：
```jsx
import { useRef } from 'react';
function useSharedCounter(initialValue) {
const counterRef = useRef(initialValue);
const increment = () => {
counterRef.current += 1;
};
const decrement = () => {
counterRef.current -= 1;
};
return {
count: counterRef.current,
increment,
decrement,
};
}
export default useSharedCounter;
```
在这个例子中，我们创建了一个名为 `useSharedCounter` 的自定义 Hook，它使用 `useRef` 来存储计数器的值，并提供了增加和减少计数器值的方法。现在我们可以在多个组件中使用这个自定义 Hook 来共享同一个计数器：
```jsx
import React from 'react';
import useSharedCounter from './useSharedCounter';
function CounterComponent1() {
const { count, increment } = useSharedCounter(0);
return (
<div>
<p>Counter in Component 1: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
function CounterComponent2() {
const { count, decrement } = useSharedCounter(100);
return (
<div>
<p>Counter in Component 2: {count}</p>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export { CounterComponent1, CounterComponent2 };
```
在这个例子中，`CounterComponent1` 和 `CounterComponent2` 组件都使用了 `useSharedCounter` 自定义 Hook，并且它们共享了同一个计数器。这意味着无论哪个组件修改了计数器的值，其他组件都会立即反映这个变化。这展示了在自定义 Hook 中使用 `useRef` 来共享数据的一个典型例子。
