reactjs 关于输出当前更新状态的Refs的说明

irlmq6kh  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(124)

当我使用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的方式在函数中给予当前更新的值,但是我不明白为什么。有人能解释一下为什么第二段代码可以工作吗?

t3irkdon

t3irkdon1#

来自useState()的变量是每个渲染器上的新变量。
一个函数可能会捕获一个状态的前一个值。只有当这个函数也被重新创建时,这个函数才会看到新的状态 (在你的例子中,当函数被创建时,它是不可见的)
来自useRef()的引用在每次渲染时都是相同的对象。使用额外的current属性的原因是能够保持对象引用相同。
请看这个例子:

let fakeUseState = 'first';
let fakeUseRef = { current: 'first' };

const f = function(){

    let state = fakeUseState;
    let ref = fakeUseRef;

    setTimeout( function(){
        console.log( 'state:', state );
        console.log( 'ref.current:', ref.current );
    }, 500 );

    fakeUseState = 'next';       // <-- `fakeUseState` is a completely new identity, different to `state`.
    fakeUseRef.current = 'next'; // <-- `fakeUseRef` is still the same object, and the same as ref.
};

f();

相关问题