如何解决测量元素:useRef 与 useCallback
当我必须测量特定节点的大小、位置或属性时,什么是最正确的(根据 React 文档)“保存”其引用的方法? useRef
还是 useCallback
?
通常,当我必须根据滚动位置更新对象的位置时,我通常会这样做:
const myRef= useRef(null);
const [divTop,setDivTop] = useState(0);
useEffect(()=>{
function doSomethingWithScrollPosition(){
if(myRef.current){
setDivTop(window.scrollY-myRef.current.getBoundingClientRect().top) //Just random operat. using ref
}
}
window.addEventListener('scroll',doSomethingWithScrollPosition)
return ()=>window.removeEventListener('scroll',doSomethingWithScrollPosition)
},[myRef])
return(
<div ref={myRef}>
</div>
)
但是最近我最终阅读了与测量节点参数相关的文档,其中建议使用 useCallback
(React docs: How can I measure a DOM node?)。
使用 useCallback
总是更好还是存在两种解决方案都可行的情况?在某些情况下应该首选 useRef
?
我应该将我的代码重构为这样的吗?
const myRefCallback= useCallback(node=>setNode(node),[]);
const [node,setNode] = useState(null);
const [divTop,setDivTop] = useState(0);
useEffect(()=>{
function doSomethingWithScrollPosition(){
if(node){
setDivTop(window.scrollY-node.getBoundingClientRect().top) //Just random operat. using ref
}
}
window.addEventListener('scroll',[node])
return(
<div ref={myRefCallback}>
</div>
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。