import { useRef } from 'react';
export default function Form() {
const inputRef = useRef(null);
function handleClick() {
inputRef.current.focus();
}
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>
Focus the input
</button>
</>
);
}
React实现useRef通过基本
概念、原理来介绍。useRef
的基本概念、数据共享层、hooks
的相关知识,阐述useRef
在 mount
和 update
阶段的操作,以及整个 react
的执行流程,包括 render
阶段和 commit
阶段,并介绍了标记和执行 ref
操作的过程。
- 基本概念:
useRef
用于获取当前元素属性,有两种定义方式,返回包含current
属性的对象。 - 数据共享层:
hook
架构有内部数据共享层,通过currentDispatcher.current
处理不同阶段调用。 hooks
相关:hooks
是函数组件和fiber
节点沟通的纽带不同阶段的fiber
节点有不同处理函数,还解决了确定fiber
对应的hook
上下文、hook
的存在位置、多个hook
处理等问题。useRef
原理:通过useRef
函数创建并返回对象,渲染流程中获取dom
实例,在render
阶段标记ref
,commit
阶段挂载dom
节点时操作ref
。mount
阶段:构建hook
对象并添加到fiber
节点的hook
链表,创建保存数据的current
对象。update
阶段:通过双缓存树机制更新hook
对象。- 执行流程:
render
阶段构建新的fiber
树,commit
阶段依据workInProgress
树中的变化节点完成DOM
操作,包括Before mutation
、mutation
、layout
三个阶段。标记ref
在beginWork
阶段,执行在commit
阶段的mutation
和layout
阶段。
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 在React中useRef 是如何实现
发表评论 取消回复