当我使用state时,例如useState,我可以通过useEffect访问状态何时更改,如下所示:
const[searchText, setSearchText]=useState("");
................
useEffect(()=>{
console.log(searchText) // THIS PRINTS OUT THE CORRECT UPDATED VALUE
},[searchText])
我完全理解这个概念。然而,有些情况下,我需要更新状态,但不能使用useEffect钩子。我发现这个工作:
const[searchResults, setSearchResults]=useState();
const searchresultRef=useRef();
..........
useEffect(()=>{
searchresultRef.current=searchResults;
},[searchResults])
..........
const SomeFunction=(e)=>{
console.log(searchresultRef.current) // THIS PRINTS OUT THE CORRECT UPDATED VALUE
console.log(searchResults) // THIS PRINTS OUT THE UNDEFINED
}
经过一些测试后,我发现refs可以通过useState和useReducer的方式在函数中给予当前更新的值,但是我不明白为什么。有人能解释一下为什么第二段代码可以工作吗?
1条答案
按热度按时间t3irkdon1#
来自
useState()
的变量是每个渲染器上的新变量。一个函数可能会捕获一个状态的前一个值。只有当这个函数也被重新创建时,这个函数才会看到新的状态 (在你的例子中,当函数被创建时,它是不可见的)。
来自
useRef()
的引用在每次渲染时都是相同的对象。使用额外的current
属性的原因是能够保持对象引用相同。请看这个例子: