react useRef的用法

### React 中 `useRef` Hook 的用法 #### 定义与基本功能 `useRef` 是 React 提供的一个 Hook，用于创建一个可变的引用对象。这个对象在整个组件生命周期内保持不变，并且其 `.current` 属性可以保存任何类型的值。这使得 `useRef` 成为了存储 DOM 节点、计时器 ID 或者其他不触发重新渲染的数据的理想选择。 ```javascript import { useRef } from 'react'; function MyComponent() { const myRef = useRef(null); // 使用 ref 获取 DOM 元素并操作它 } ``` #### 实际应用场景 ##### 场景一：访问DOM节点 当需要直接操纵某个特定的 HTML 元素时，可以通过给该元素设置 `ref={myRef}` 来获取到对应的 DOM 对象实例[^1]。 ```jsx const inputElement = useRef(null); <button onClick={() => inputElement.current.focus()}> Focus Input </button> <input ref={inputElement} /> ``` ##### 场景二：管理状态而不引起重绘 有时希望某些变量的变化不会导致组件重新渲染，这时就可以利用 `useRef` 存储这些数据。因为修改 `useRef().current` 不会引发新的渲染周期[^2]。 ```jsx let countRender = useRef(0); function Counter(){ useEffect(() => { console.log(`You've rendered ${countRender.current++}`); }); return ( <div>Counter Component</div> ); } ``` ##### 场景三：跨多个子组件共享逻辑 虽然这里提到的是自定义 Hooks 可以用来分享逻辑，但是通过 `useImperativeHandle` 和 `forwardRef` 结合 `useRef` 同样能够实现类似的效果，在父级控制子级的行为而不需要传递回调函数作为 prop。 ```jsx // Child component that exposes imperative methods via forwardRef and useImperativeHandle. const FancyInput = React.forwardRef((props, ref) => { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return <input ref={inputRef} />; }); // Parent component uses the child's exposed method through useRef. class App extends React.Component { constructor(props){ super(props); this.inputEl = React.createRef(); } render() { return( <> <FancyInput ref={this.inputEl}/> <button onClick={()=>{this.inputEl.current.focus();}}>Focus the input</button> </> ) } }; ```

### React 中 `useRef` Hook 的用法 在 React 函数组件中，`useRef` 是一种用于创建可变的引用对象的方法[^1]。此钩子返回一个可变的对象，其 `.current` 属性被初始化为传递给 `useRef()` 的参数（即初始值）。返回的对象将在整个组件生命周期内保持不变。 #### 创建和访问 Ref 对象 下面是一个简单的例子来展示如何使用 `useRef` 来获取 DOM 节点： ```javascript import React, { useRef } from 'react'; function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` 指向已挂载到 DOM 上的文本输入元素 inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>点击聚焦</button> </> ); } ``` 这段代码展示了当按钮被点击时，文本框会自动获得焦点[^2]。 #### 使用 `useRef` 存储变量 除了操作DOM节点外，还可以利用 `useRef` 来保存任何可变值，在不触发重新渲染的情况下存储数据。这使得它非常适合用来缓存计算结果或其他状态之外的信息。 ```javascript import React, { useState, useRef, useEffect } from 'react'; function Timer() { const intervalRef = useRef(); const [seconds, setSeconds] = useState(0); useEffect(() => { intervalRef.current = setInterval(() => { setSeconds(( prevState ) => prevState + 1); }, 1000 ); return () => clearInterval(intervalRef.current); // 清除定时器 }, []); return <>已经过去了{seconds}秒。</>; } ``` 在这个计时器的例子中，通过将定时器 ID 存入 `intervalRef` 可以确保即使组件更新也不会丢失这个重要的信息，并且可以在卸载组件前清除定时器防止内存泄漏。