代码之家 › 专栏 › 技术社区 › D. Rattansingh

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

reactjs

D. Rattansingh · 技术社区 · 2 年前

当我使用状态时,例如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一起工作,以在函数中给出当前更新的值,但我不明白为什么。有人能解释一下为什么第二段代码有效吗?

0 回复 | 直到 2 年前

kca 2 年前

的变量 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();

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

12 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

12 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前