您好,登錄后才能下訂單哦!
這篇文章主要介紹“react寫法實(shí)例代碼分析”,在日常操作中,相信很多人在react寫法實(shí)例代碼分析問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”react寫法實(shí)例代碼分析”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
這是一段初看讓人很困惑的代碼:
function App() { const [dom, setDOM] = useState(null); return <div ref={setDOM}></div>; }
讓我們來分析下它的作用。
首先,ref
有兩種形式(曾經(jīng)有3種):
形如{current: T}
的數(shù)據(jù)結(jié)構(gòu)
回調(diào)函數(shù)形式,會(huì)在ref
更新、銷毀時(shí)觸發(fā)
例子中的setDOM
是useState
的dispatch
方法,也有兩種調(diào)用形式:
直接傳遞更新后的值,比如setDOM(xxx)
傳遞更新狀態(tài)的方法,比如setDOM(oldDOM => return /* 一些處理邏輯 */)
在例子中,雖然反常,但ref
的第二種形式和dispatch
的第二種形式確實(shí)是契合的。
也就是說,在例子中傳遞給ref
的setDOM
方法,會(huì)在div對(duì)應(yīng)DOM更新、銷毀時(shí)執(zhí)行,那么dom
狀態(tài)中保存的就是div對(duì)應(yīng)DOM的最新值。
這么做一定程度上實(shí)現(xiàn)了感知DOM的實(shí)時(shí)變化,這是單純使用ref
無法具有的能力。
通常我們認(rèn)為useMemo
用來緩存變量props
,useCallback
用來緩存函數(shù)props
。
但在實(shí)際項(xiàng)目中,如果想通過緩存props的方式達(dá)到子組件性能優(yōu)化的目的,需要同時(shí)保證:
所有傳給子組件的props
的引用都不變(比如通過useMemo
)
子組件使用React.memo
類似這樣:
function App({todos, tab}) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab]); return <Todo data={visibleTodos}/>; } // 為了達(dá)到Todo性能優(yōu)化的目的 const Todo = React.memo(({data}) => { // ...省略邏輯 })
既然useMemo
可以緩存變量,為什么不直接緩存組件的返回值呢?類似這樣:
function App({todos, tab}) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab]); return useMemo(() => <Todo data={visibleTodos}/>, [visibleTodos]) } function Todo({data}) { return <p>{data}</p>; }
如此,需要性能優(yōu)化的子組件不再需要手動(dòng)包裹React.memo
,只有當(dāng)useMemo
依賴變化后子組件才會(huì)重新render
。
到此,關(guān)于“react寫法實(shí)例代碼分析”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。