在React.useRef中提取current值是否可行？是否有副作用及违反最佳实践？

结论：这种写法不可行，会引发副作用，违背React最佳实践 #

核心问题原因： #

• React的useRef Hook在每次组件渲染时都会执行调用，所以React.useRef(new Obj()).current的写法会导致：
  1. 每次渲染都创建一个全新的Obj实例，完全失去了useRef用来跨渲染保持引用稳定的核心作用
  2. 你拿到的ref变量只是当前渲染周期内的临时对象引用，下一次渲染时会被替换成新的实例，无法实现状态持久化

可能引发的意外副作用： #

• 不必要的性能损耗：如果Obj是复杂对象（比如包含大量数据、DOM元素引用或初始化逻辑），每次渲染重复创建会增加组件的渲染开销
• 逻辑错误：如果业务逻辑依赖这个对象的状态（比如存储计数、DOM操作句柄），每次渲染都用新实例会导致状态丢失、操作失效

正确的最佳实践写法： #

应该先创建稳定的ref对象，再通过current属性访问内部引用，这样useRef返回的ref对象本身在组件生命周期内保持不变，只有current的值可以按需修改：

const ref = React.useRef(new Obj());
// 后续使用 ref.current 访问对象实例
ref.current.someMethod();

如果需要延迟初始化（比如Obj的创建依赖组件props或其他状态），可以在useEffect中初始化：

const ref = React.useRef(null);
React.useEffect(() => {
  ref.current = new Obj(someProp);
}, [someProp]);

内容的提问来源于stack exchange，提问作者Rillian Grant