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

irlmq6kh 于 2023-04-05 发布在 React

关注(0)|答案(1)|浏览(125)

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

reactjs

来源：https://stackoverflow.com/questions/75910576/an-explanation-for-refs-outputting-the-current-updated-state

1条答案

按热度按时间

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();

赞(0）回复(0）举报 2023-04-05

我来回答

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

1条答案

相关问题

热门标签

最新问答