You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React usePrevious函数在MDN焦点管理示例中的工作原理答疑

关于usePrevious钩子的执行时机疑问

此前已有相关问题发布,但我仍需进一步澄清。

组件代码:

const [editing, setEditing] = useState(false);
const wasEditing = usePrevious(editing);

useEffect(() => {
  if(!wasEditing && editing){
    editFieldRef.current.focus();
  }
  if(wasEditing && !editing){
    editButtonRef.current.focus();
  }
}, [wasEditing,editing])

usePrevious钩子实现:

function usePrevious(value){
  const ref = useRef();
  useEffect(() => {
      ref.current = value;
  })
  return ref.current;   // <=== 此行
}

根据我的理解,结合之前回答遗漏的部分步骤,我认为执行优先级如下:

  • 执行useEffect()函数
  • 运行其余代码(即上面标注注释的那一行)

请问usePrevious函数何时以及为何会再次运行?


内容的提问来源于stack exchange,提问作者Dimitrios Tsimaras

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.23 03:14:54