2個奇怪的react寫法
ref的奇怪用法
這是一段初看讓人很困惑的代碼：
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ù)形式，會在
ref更新、銷毀時觸發(fā)
例子中的setDOM是useState的dispatch方法，也有兩種調(diào)用形式：
- 直接傳遞更新后的值，比如
setDOM(xxx) - 傳遞更新狀態(tài)的方法，比如
setDOM(oldDOM => return /* 一些處理邏輯 */)
在例子中，雖然反常，但ref的第二種形式和dispatch的第二種形式確實是契合的。
也就是說，在例子中傳遞給ref的setDOM方法，會在div對應(yīng)DOM更新、銷毀時執(zhí)行，那么dom狀態(tài)中保存的就是div對應(yīng)DOM的最新值。
這么做一定程度上實現(xiàn)了感知DOM的實時變化，這是單純使用ref無法具有的能力。
useMemo的奇怪用法
通常我們認(rèn)為useMemo用來緩存變量props，useCallback用來緩存函數(shù)props。
但在實際項目中，如果想通過緩存props的方式達(dá)到子組件性能優(yōu)化的目的，需要同時保證：
- 所有傳給子組件的
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)化的子組件不再需要手動包裹React.memo，只有當(dāng)useMemo依賴變化后子組件才會重新render。
總結(jié)
除了這兩種奇怪的寫法外，你還遇到哪些奇怪的React寫法呢？
相關(guān)文章
![react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題](http://img.jbzj.com/images/xgimg/bcimg0.png)
react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題
本文主要介紹了react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題,文中通過圖文示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
React報錯信息之Expected?an?assignment?or?function?call?and?
這篇文章主要介紹了React報錯之Expected?an?assignment?or?function?call?and?instead?saw?an?expression,下面有兩個示例來展示錯誤是如何產(chǎn)生的，需要的朋友可以參考下2022-08-08
react版模擬亞馬遜人機(jī)交互菜單的實現(xiàn)
本文主要介紹了react版模擬亞馬遜人機(jī)交互菜單的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法
這篇文章主要介紹了詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了react.js框架Redux基礎(chǔ)案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了詳解各版本React路由的跳轉(zhuǎn)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn)
這篇文章主要介紹了React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React?state結(jié)構(gòu)設(shè)計原則示例詳解
這篇文章主要為大家介紹了React?state結(jié)構(gòu)設(shè)計原則示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
React 進(jìn)入頁面后自動 focus 到某個輸入框的解決方案
React.js 當(dāng)中提供了 ref 屬性來幫助我們獲取已經(jīng)掛載的元素的 DOM 節(jié)點,你可以給某個 JSX 元素加上 ref屬性,這篇文章主要介紹了React 進(jìn)入頁面以后自動 focus 到某個輸入框,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了淺談React Native 中組件的生命周期，非常具有實用價值，需要的朋友可以參考下2017-09-09