2個(gè)奇怪的react寫法
更新時(shí)間：2023年03月15日 15:09:35 作者：卡頌
大家好，我卡頌。雖然React官網(wǎng)用大量篇幅介紹最佳實(shí)踐，但因JSX語法的靈活性，所以總是會(huì)出現(xiàn)奇奇怪怪的React寫法。本文介紹2種奇怪（但在某些場(chǎng)景下有意義）的React寫法。也歡迎大家在評(píng)論區(qū)討論你遇到過的奇怪寫法
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ù)形式，會(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無法具有的能力。
useMemo的奇怪用法
通常我們認(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。
總結(jié)
除了這兩種奇怪的寫法外，你還遇到哪些奇怪的React寫法呢？
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)輪播圖效果，使用react-slick組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了React-Native 環(huán)境搭建和基本介紹的相關(guān)資料,包括react native優(yōu)缺點(diǎn)，通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-04-04
React?中的事件，是對(duì)原生事件的封裝，叫做合成事件。抽象出一層合成事件，是為了做兼容，抹平不同瀏覽器之間的差異。本文將從事件綁定和事件觸發(fā)角度，帶大家解讀下源碼，感興趣的可以了解一下2022-12-12
這篇文章主要為大家介紹了useState?解決文本框無法輸入的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了關(guān)于react useState更新異步問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。2022-08-08
Native?Memory?Tracking追蹤區(qū)域示例分析
這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React組件有哪些生命周期函數(shù)？類組件才有的生命周期函數(shù)，分為幾個(gè)階段：掛載，更新，卸載，錯(cuò)誤處理，本文主要介紹了這個(gè)階段，感興趣的可以了解一下2021-06-06
一文帶你掌握React類式組件中setState的應(yīng)用
這篇文章主要為大家詳細(xì)介紹了介紹了React類式組件中setState的三種寫法以及簡(jiǎn)單討論下setState?到底是同步的還是異步的,感興趣的可以了解下2024-02-02
useEffect是React中的一個(gè)鉤子函數(shù),用于處理副作用操作,這篇文章主要為大家介紹了React中useEffect函數(shù)的具體用法,希望對(duì)大家有所幫助2023-08-08
React中使用Axios發(fā)起POST請(qǐng)求提交文件方式
這篇文章主要介紹了React中使用Axios發(fā)起POST請(qǐng)求提交文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02