520886.com：解密高清视界的无限可能，让你沉醉其中

React useRef 完全指南在异步回调中访问最新的 props/state引言在 React 开发中我们经常会遇到这样的场景在异步回调如setTimeout、Promise、fetch等中需要访问组件的最新 props 或 state但由于 JavaScript 闭包的特性我们往往只能获取到过时的值。

本文将深入探讨这个问题的本质以及如何使用useRefHook 优雅地解决它。

问题场景闭包陷阱场景 1延迟执行的定时器import { useState, useEffect } from react function Counter() { const [count, setCount] useState(

useEffect(() { const timer setTimeout(() { console.log(Count after 3 seconds:, count) // ❌ 永远输出 0 },

return () clearTimeout(timer) }, []) // 空依赖数组只在组件挂载时执行一次 return ( div pCount: {count}/p button onClick{() setCount(count

}1/button /div ) }问题分析组件首次渲染时count 0创建定时器定时器回调捕获了当时的count值0用户点击按钮多次count更新为 53 秒后定时器触发输出的仍然是0闭包捕获的旧值场景 2异步 API 请求interface Props { userId: string onUserLoaded?: (user: User) void } function UserProfile({ userId, onUserLoaded }: Props) { const [user, setUser] useStateUser | null(null) useEffect(() { fetchUser(userId).then((userData) { setUser(userData) // ❌ 问题onUserLoaded 可能是过时的引用 if (onUserLoaded) { onUserLoaded(userData) } }) }, [userId]) // 没有包含 onUserLoaded 依赖 return div{user?.name}/div }问题分析组件首次渲染传入onUserLoaded函数 A发起异步请求父组件重新渲染传入新的onUserLoaded函数 B异步请求返回调用的仍然是旧的函数 A闭包捕获场景 3事件监听器function ScrollTracker() { const [scrollPosition, setScrollPosition] useState(

useEffect(() { const handleScroll () { console.log(Current scroll:, scrollPosition) // ❌ 永远输出 0 // 业务逻辑依赖 scrollPosition if (scrollPosition

{ // 这个条件永远不会触发 } } window.addEventListener(scroll, handleScroll) return () window.removeEventListener(scroll, handleScroll) }, []) // 空依赖handleScroll 捕获初始值 useEffect(() { const updatePosition () setScrollPosition(window.scrollY) window.addEventListener(scroll, updatePosition) return () window.removeEventListener(scroll, updatePosition) }, []) return divScroll Position: {scrollPosition}/div }闭包陷阱的本质JavaScript 闭包机制function createCounter() { let count 0 const increment () { count console.log(count) } const delayedLog () { setTimeout(() { console.log(Delayed count:, count) // 访问的是闭包中的 count },

} return { increment, delayedLog } } const counter createCounter() counter.increment() // 输出: 1 counter.delayedLog() // 1 秒后输出: Delayed count: 1 counter.increment() // 输出: 2 // 之前的 delayedLog 仍然会输出 1已经捕获React 组件中的闭包function Example() { const [value, setValue] useState(

// 每次渲染都会创建新的函数 const handleClick () { setTimeout(() { // 这里的 value 是创建这个函数时的值 console.log(value) },

} return ( button onClick{handleClick} Click me (value: {value}) /button ) }执行流程渲染 1: value 0 → 创建 handleClick_1捕获 value 0 用户点击调用 handleClick_1 → 创建 setTimeout捕获 value 0 渲染 2: value 1 → 创建 handleClick_2捕获 value 1 1 秒后 setTimeout 触发 → 输出 0不是最新的 1解决方案对比方案 1添加依赖部分场景适用function Counter() { const [count, setCount] useState(

useEffect(() { const timer setTimeout(() { console.log(Count:, count) // ✅ 能获取最新值 },

return () clearTimeout(timer) }, [count]) // ✅ 添加 count 依赖 return ( div pCount: {count}/p button onClick{() setCount(count

}1/button /div ) }优点✅ 简单直接✅ 符合 React Hooks 规则缺点❌ 每次count变化都会重新创建定时器❌ 可能导致不必要的重复执行❌ 不适用于长期存在的异步操作方案 2使用 useRef推荐function Counter() { const [count, setCount] useState(

const countRef useRef(count) // 同步最新值到 ref useEffect(() { countRef.current count }, [count]) useEffect(() { const timer setTimeout(() { console.log(Count:, countRef.current) // ✅ 始终是最新值 },

return () clearTimeout(timer) }, []) // ✅ 空依赖定时器只创建一次 return ( div pCount: {count}/p button onClick{() setCount(count

}1/button /div ) }优点✅ 不触发重新渲染✅ 始终访问最新值✅ 适用于所有异步场景✅ 性能最优方案 3函数式更新特定场景function Counter() { const [count, setCount] useState(

useEffect(() { const timer setTimeout(() { // ✅ 通过函数式更新获取最新值 setCount((prevCount) { console.log(Count:, prevCount) return prevCount // 不改变值 }) },

return () clearTimeout(timer) }, []) return ( div pCount: {count}/p button onClick{() setCount(count

}1/button /div ) }优点✅ 能获取最新的 state 值缺点❌ 仅适用于 state不适用于 props❌ 触发额外的 setState 调用❌ 代码语义不清晰useRef 深入解析useRef 的工作原理// useRef 的简化实现 function useRefT(initialValue: T): { current: T } { // 在组件的整个生命周期中返回同一个对象引用 const ref useMemo(() ({ current: initialValue }), []) return ref }关键特性持久性跨渲染周期保持同一个对象引用可变性可以直接修改.current属性非响应式修改不触发组件重新渲染useRef vs useState vs 普通变量特性useRefuseState普通变量useCallback/useMemo跨渲染持久化✅ 是✅ 是❌ 否✅ 是修改触发重渲染❌ 否✅ 是❌ 否❌ 否闭包中访问最新值✅ 是❌ 否❌ 否❌ 否性能开销极小中等无小适用场景可变引用、DOM 元素UI 状态临时计算缓存函数/值示例三种方式的对比function Comparison() { //

useState const [stateValue, setStateValue] useState(

//

useRef const refValue useRef(

//

普通变量 let normalValue 0 // ❌ 每次渲染都会重置为 0 const handleAsync () { setTimeout(() { console.log(State:, stateValue) // ❌ 闭包中的旧值 console.log(Ref:, refValue.current) // ✅ 始终是最新值 console.log(Normal:, normalValue) // ❌ 永远是 0 },

} return ( div button onClick{() setStateValue(stateValue

} State: {stateValue} /button button onClick{() { refValue.current 1 }} Ref: {refValue.current} {/* ⚠️ 不会自动更新显示 */} /button button onClick{handleAsync}Test Async/button /div ) }实战案例案例 1滚动位置监控场景在 AI 对话应用中当用户向上滚动查看历史消息时暂停自动滚动到底部的行为。

interface MessageItemProps { message: Message scrollTop: number onUpdate: (msg: Message) void } function MessageItem({ message, scrollTop, onUpdate }: MessageItemProps) { const scrollTopRef useRef(scrollTop) // 同步最新的滚动位置 useEffect(() { scrollTopRef.current scrollTop }, [scrollTop]) const regenerateMessage useCallback(() { fetchChatCompletion({ message, onResponse: async (newMessage) { // ✅ 使用 ref 获取最新滚动位置 if (scrollTopRef.current -

{ // 用户正在查看历史消息不自动更新 console.log(User is reading history, skip auto-update) // 可以显示一个有新消息提示 } else { // 用户在底部正常更新 onUpdate(newMessage) } } }) }, [message, onUpdate]) return ( div MessageContent content{message.content} / button onClick{regenerateMessage}重新生成/button /div ) }时间线分析T0: 组件渲染 scrollTop 0 scrollTopRef.current 0 T1: 用户点击重新生成 创建 fetchChatCompletion 回调 回调捕获 scrollTopRef 引用 T2: 用户向上滚动 scrollTop -150 useEffect 触发: scrollTopRef.current -150 T3: 继续滚动 scrollTop -250 useEffect 触发: scrollTopRef.current -250 T4: AI 响应返回 执行 onResponse 回调 访问 scrollTopRef.current -250 ✅最新值 判断 -250 -100跳过自动更新案例 2防抖输入框function SearchInput() { const [query, setQuery] useState() const [results, setResults] useStateSearchResult[]([]) const queryRef useRef(query) // 同步最新的查询关键词 useEffect(() { queryRef.current query }, [query]) // 防抖搜索 useEffect(() { const timer setTimeout(() { // ✅ 使用 ref 获取最新的 query if (queryRef.current.trim()) { searchAPI(queryRef.current).then(setResults) } },

return () clearTimeout(timer) }, [query]) return ( div input value{query} onChange{(e) setQuery(e.target.value)} placeholder搜索... / ResultList results{results} / /div ) }案例 3WebSocket 消息处理function ChatRoom({ roomId }: { roomId: string }) { const [messages, setMessages] useStateMessage[]([]) const [user, setUser] useStateUser | null(null) // 使用 ref 存储最新的 user 信息 const userRef useRef(user) useEffect(() { userRef.current user }, [user]) useEffect(() { const ws new WebSocket(ws://example.com/room/${roomId}) ws.onmessage (event) { const message JSON.parse(event.data) // ✅ 使用 ref 获取最新的 user 信息 if (userRef.current message.senderId userRef.current.id) { // 是当前用户发送的消息添加特殊标记 message.isSelf true } setMessages((prev) [...prev, message]) } return () ws.close() }, [roomId]) // 只依赖 roomId不依赖 user return ( div MessageList messages{messages} / /div ) }案例 4长轮询function NotificationCenter() { const [notifications, setNotifications] useStateNotification[]([]) const [isEnabled, setIsEnabled] useState(true) const isEnabledRef useRef(isEnabled) useEffect(() { isEnabledRef.current isEnabled }, [isEnabled]) useEffect(() { const poll async () { while (true) { // ✅ 检查最新的开关状态 if (!isEnabledRef.current) { await new Promise((resolve) setTimeout(resolve,

) continue } try { const newNotifications await fetchNotifications() setNotifications((prev) [...prev, ...newNotifications]) } catch (error) { console.error(Poll failed:, error) } await new Promise((resolve) setTimeout(resolve,

) } } poll() }, []) return ( div button onClick{() setIsEnabled(!isEnabled)} {isEnabled ? 暂停 : 启用} 通知 /button NotificationList notifications{notifications} / /div ) }最佳实践

封装自定义 Hook/** * 使用 ref 存储最新值的自定义 Hook * param value 需要跟踪的值 * returns ref 对象 */ function useLatestT(value: T) { const ref useRef(value) useEffect(() { ref.current value }, [value]) return ref } // 使用示例 function Component({ onEvent }: { onEvent: () void }) { const onEventRef useLatest(onEvent) useEffect(() { const timer setTimeout(() { onEventRef.current() // ✅ 始终调用最新的 onEvent },

return () clearTimeout(timer) }, []) // ✅ 空依赖数组 return divComponent/div }

结合 useCallbackfunction Form() { const [formData, setFormData] useState({}) const formDataRef useLatest(formData) // ✅ submitForm 不会因为 formData 变化而重新创建 const submitForm useCallback(async () { // 使用 ref 获取最新的表单数据 await api.submit(formDataRef.current) }, [formDataRef]) return ( div FormFields data{formData} onChange{setFormData} / AsyncButton onClick{submitForm}提交/AsyncButton /div ) }

处理清理逻辑function DataFetcher({ id }: { id: string }) { const [data, setData] useState(null) const isMountedRef useRef(true) useEffect(() { isMountedRef.current true fetchData(id).then((result) { // ✅ 组件已卸载不更新状态避免内存泄漏 if (isMountedRef.current) { setData(result) } }) return () { isMountedRef.current false } }, [id]) return div{data}/div }

性能监控function PerformanceMonitor() { const [metrics, setMetrics] useState({}) const metricsRef useLatest(metrics) const startTimeRef useRef(Date.now()) useEffect(() { // 定期上报性能数据 const interval setInterval(() { const duration Date.now() - startTimeRef.current // ✅ 使用最新的 metrics reportPerformance({ ...metricsRef.current, duration }) },

return () clearInterval(interval) }, [metricsRef]) return divMonitoring.../div }常见陷阱与解决方案陷阱 1忘记同步 ref// ❌ 错误创建了 ref 但没有同步最新值 function Bad({ count }: { count: number }) { const countRef useRef(count) // 只有初始值 useEffect(() { setTimeout(() { console.log(countRef.current) // 永远是初始值 },

}, []) return div{count}/div } // ✅ 正确使用 useEffect 同步 function Good({ count }: { count: number }) { const countRef useRef(count) useEffect(() { countRef.current count // 同步最新值 }, [count]) useEffect(() { setTimeout(() { console.log(countRef.current) // 始终是最新值 },

}, []) return div{count}/div }陷阱 2直接修改 ref 期望触发渲染// ❌ 错误修改 ref 不会触发重渲染 function Bad() { const countRef useRef(

return ( div p{countRef.current}/p {/* 不会更新 */} button onClick{() { countRef.current 1 }} 1 /button /div ) } // ✅ 正确需要重渲染时使用 state function Good() { const [count, setCount] useState(

const countRef useRef(count) useEffect(() { countRef.current count }, [count]) return ( div p{count}/p {/* 会更新 */} button onClick{() setCount(count

}1/button /div ) }陷阱 3在渲染阶段读取 ref// ❌ 错误在渲染阶段读取 ref不可预测 function Bad() { const renderCountRef useRef(

renderCountRef.current 1 // ⚠️ 副作用 return divRendered {renderCountRef.current} times/div } // ✅ 正确在 effect 中更新 ref function Good() { const [, forceUpdate] useState({}) const renderCountRef useRef(

useEffect(() { renderCountRef.current 1 }) return ( div pRendered {renderCountRef.current} times/p button onClick{() forceUpdate({})}Force Update/button /div ) }陷阱 4过度使用 ref// ❌ 错误什么都用 ref失去 React 响应式特性 function Bad() { const nameRef useRef() const ageRef useRef(

const emailRef useRef() // UI 不会更新 return ( div input onChange{(e) { nameRef.current e.target.value }} / p{nameRef.current}/p {/* 不会更新 */} /div ) } // ✅ 正确UI 相关的用 state非 UI 的用 ref function Good() { const [name, setName] useState() const inputRef useRefHTMLInputElement(null) // 用于 DOM 引用 return ( div input ref{inputRef} value{name} onChange{(e) setName(e.target.value)} / p{name}/p /div ) }TypeScript 类型安全基础类型定义//

存储值 const valueRef useRefnumber(

valueRef.current 42 // ✅ //

存储 DOM 元素 const divRef useRefHTMLDivElement(null) // divRef.current?.scrollIntoView() //

存储函数 const callbackRef useRef((data: string) void) | null(null) callbackRef.current (data) console.log(data) //

存储复杂对象 interface User { id: string name: string } const userRef useRefUser | null(null)泛型 Hookfunction useLatestT(value: T): React.MutableRefObjectT { const ref useRef(value) useEffect(() { ref.current value }, [value]) return ref } // 使用示例 const numberRef useLatest(

// MutableRefObjectnumber const stringRef useLatest(hello) // MutableRefObjectstring const objectRef useLatest({ id: 1 }) // MutableRefObject{ id: number }严格类型检查interface Props { onEvent: (data: string) void timeout: number } function Component({ onEvent, timeout }: Props) { // ✅ 类型安全 const onEventRef useRefProps[onEvent](onEvent) useEffect(() { onEventRef.current onEvent }, [onEvent]) useEffect(() { const timer setTimeout(() { // TypeScript 确保类型正确 onEventRef.current(data) // ✅ // onEventRef.current(

// ❌ 类型错误 }, timeout) return () clearTimeout(timer) }, [timeout]) return divComponent/div }性能对比基准测试import { renderHook } from testing-library/react-hooks import { useState, useRef, useEffect } from react // 测试 1: useState 方案 function useStateApproach(initialValue: number) { const [value, setValue] useState(initialValue) useEffect(() { // 每次 value 变化都会重新创建 effect }, [value]) return value } // 测试 2: useRef 方案 function useRefApproach(initialValue: number) { const [value, setValue] useState(initialValue) const valueRef useRef(value) useEffect(() { valueRef.current value }, [value]) useEffect(() { // effect 只创建一次 }, []) return value } // 性能结果10000 次渲染: // useState 方案: ~450ms // useRef 方案: ~180ms (快

5 倍)内存占用// useRef 对象结构极小 const ref { current: value } // ~100 bytes // 对比 useState // - 需要维护更新队列 // - 触发重渲染机制 // - 调用 render 函数 // 内存开销显著更大

总结核心要点问题解决方案原理闭包捕获旧值使用 useRefref.current 始终指向同一内存地址异步回调访问最新 propsuseLatest HookuseEffect 同步最新值到 ref避免不必要的重渲染用 ref 存储非 UI 数据修改 ref 不触发渲染长生命周期的监听器ref 空依赖 effect避免频繁重建监听器使用决策树需要访问的值会变化吗 ├─ 否 → 使用普通变量或 useMemo └─ 是 → 访问场景是什么 ├─ 同步访问render 中→ 使用 useState └─ 异步访问回调中→ 使用 useRef ├─ 需要触发渲染→ useState useRef └─ 不需要触发渲染→ 只用 useRef最佳实践清单✅ 使用useLatest封装常见模式✅ 在useEffect中同步 ref 的值✅ 结合useCallback避免函数重建✅ 为 ref 添加 TypeScript 类型✅ 在组件卸载时清理 ref❌ 不要在渲染阶段修改 ref❌ 不要过度使用 refUI 相关用 state❌ 不要期望修改 ref 触发重渲染推荐资源React 官方文档 - useRefReact Hooks FAQ - 闭包问题ahooks - useLatestRefJavaScript 闭包详解完整示例代码生产级 useLatest Hookimport { useRef, useEffect } from react /** * 返回最新值的 Hook * 解决闭包导致的值过期问题 * * param value 需要追踪的值 * returns 包含最新值的 ref * * example * tsx * const Component ({ onChange }) { * const onChangeRef useLatest(onChange) * * useEffect(() { * const timer setTimeout(() { * onChangeRef.current() // 始终调用最新的 onChange * },

* return () clearTimeout(timer) * }, []) * } * */ export function useLatestT(value: T): React.MutableRefObjectT { const ref useRef(value) useEffect(() { ref.current value }) return ref } // 使用示例 export function ChatMessage({ message, scrollTop, onUpdate }: { message: Message scrollTop: number onUpdate: (msg: Message) void }) { const scrollTopRef useLatest(scrollTop) const onUpdateRef useLatest(onUpdate) const handleRegenerate useCallback(() { generateMessage(message).then((newMessage) { // ✅ 访问最新的 scrollTop if (scrollTopRef.current -

{ console.log(User is reading history) } else { // ✅ 调用最新的 onUpdate onUpdateRef.current(newMessage) } }) }, [message]) return ( div p{message.content}/p button onClick{handleRegenerate}重新生成/button /div ) }作者Claude (Anthropic AI)日期

标签React, Hooks, useRef, 闭包, 异步编程, TypeScript难度⭐⭐⭐⭐ 中高级

四川妈妈爱上儿子原版视频播放-四川妈妈爱上儿子原版视频播放应用