縹緲止盈
2021-06-29 18:06:07
我正在使用 mobx-react / mobx-react-lite 進(jìn)行狀態(tài)管理使用類(lèi)我可以定義一個(gè)不可觀察的 idToDelete 來(lái)存儲(chǔ)單擊的項(xiàng)目 ID,使用可觀察打開(kāi)一個(gè) Modal,當(dāng)用戶(hù)單擊“刪除”時(shí),我知道要?jiǎng)h除的項(xiàng)目。該 id 通過(guò)重新渲染被組件“記住” class Greeting extends React.Component { idToDelete = null; confirmDelete = id => { this.idToDelete = id; openConfirm = true; } closeModal = () => { openConfirm = true; this.idToDelete = null; } @observable openConfirm = false; render() { // List of items with delete button <button onClick=this.confirmDelete(id)>Delete</button> // Confirm Delete Modal } }但是在無(wú)狀態(tài)組件中,每次重新渲染時(shí) id 都會(huì)變?yōu)?null(初始化值)。使用useLocalStore鉤子我可以存儲(chǔ)可觀察值:返回對(duì)象的所有屬性都將自動(dòng)變?yōu)榭捎^察的但我不想僅僅因?yàn)槲艺诖鎯?chǔ)/更改 ID 而重新渲染。使用 React.React.createContext / useContext 對(duì)我來(lái)說(shuō)似乎有點(diǎn)矯枉過(guò)正(這是一種私有價(jià)值,它與組件本身無(wú)關(guān))是否有“本地存儲(chǔ)”方式來(lái)實(shí)現(xiàn)這一目標(biāo)?(沒(méi)有可觀察的轉(zhuǎn)換)這種情況的最佳做法是什么?
1 回答

紅糖糍粑
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以使用useRef掛鉤來(lái)保存該值。對(duì)此值的更改不會(huì)觸發(fā)重新渲染,并且除非您覆蓋它,否則該值將在渲染中保持不變。
它也詳細(xì)解釋here
是的!useRef() 鉤子不僅僅用于 DOM 引用?!皉ef”對(duì)象是一個(gè)通用容器,它的當(dāng)前屬性是可變的并且可以保存任何值,類(lèi)似于類(lèi)上的實(shí)例屬性。
例如:
import { useRef } from 'react';
const idToDelete = useRef("");
confirmDelete = id => {
idToDelete.current = id;
}
closeModal = () => {
idToDelete.current = null;
}
還請(qǐng)注意,您需要使用.current來(lái)訪問(wèn)數(shù)據(jù)。
添加回答
舉報(bào)
0/150
提交
取消