React使用hooks時 如何做條件渲染

時間 2021-05-31 03:51:29

1樓:Ranger

不會的學起來,老師精講React,可以一看https://www.

2樓:pretty kernel

基本的套路是:

useRef() 返回乙個 flag,將其放在 hook 的 deps 陣列引數中。由於 useRef() 可以在兩幀之間保持狀態,你可以通過 flag.current 來修改這個 flag,實現條件渲染。

3樓:吞吞吐吐

這個不是hook該幹的事,hook跟state都是在元件內部的東西,元件被銷毀了當然就沒了,

要不你就狀態提公升放到上面,要不你就用全域性狀態管理,比如 mobx, redux

4樓:

個人認為,開發思維裡面「顯式」是很重要的一點,元件內宣告的鉤子存活於元件生命週期內是乙個從直覺上合理的設計。而如果你如果認為鉤子應該存活於全域性那就應該讓元件存活於全域性

5樓:張大宗偉

如果就沒有任何依賴的hooks來說,可以在hooks裡面定義乙個update function,然後匯出,在外層呼叫這個函式就行。

6樓:一條特立獨行的狗

使用空元件。

雖然 hooks 不能條件渲染,但是元件可以。所以封裝乙個元件,在這個元件呼叫 hooks 然後返回 null。

最後在條件渲染這個空元件。

7樓:邵鎖

我之前寫 TimePicker 就遇到過這個問題,map 的 3 列picker 滑動選擇乙個picker 這個state 是正常。 滑動另外乙個picker。發現前面乙個state 拿到的值還是初始值。

還以為是bug,後面發現 React 設計本如此。

首先說結論,元件在多次掛載中 hooks (setState)不會儲存元件的區域性狀態。

再元件,我們知道乙個個元件巢狀成樹結構生成頁面。

理論上來說只分成兩種,一是根元件,一是區域性元件。如果區域性元件都儲存狀態,那狀態說不是乙個特別大的資料。而且什麼時候該儲存什麼時候不儲存呢?

每一次更新都儲存下來嗎? 那肯定不現實。

所以不管是函式元件還是Class 元件只要是自己內部完的東西,基本上都會跟著元件一起銷毀。每次記錄的都是當前時間點的。

當然可以像vue那樣 keep-alive 但是這個keep-alive也是有代價的,不可能所有元件都預設keep-alive。keep-alive 的本質就是不銷毀元件,這樣有兩個缺點,一是無法保證實效性,二是增加記憶體。

看你願不願這樣做。簡單的方式使用css隱藏顯示會不會更簡單,也就是不銷毀元件基礎上保留狀態

同樣hooks 儲存可以做到嗎。可以做到:

兩種方法:

useContext + useReducer 儲存父元件context 下面裡面

redux 儲存在公共倉庫中

8樓:Zige

你這問題就有問題

你改變了 loading 就銷毀了乙個並建立了乙個新的東西都銷毀了還有什麼狀態啊

想要保留就去控制顯示隱藏操作 css 就好了何必去銷毀呢

9樓:Kaid Wong

如果你是指兩個 count 狀態每次都被重置了,那是因為這裡每次切換 loading 狀態,元件都會被重新掛載,而兩個 count 都是元件的區域性狀態,會隨著元件的掛載被重新初始化。

如果想保留 count 狀態做條件渲染,就把兩個 count 狀態提公升吧。

React 作者關於 Hooks 的深度 issue,值得你閱讀

巔峰智業 從產品領域上看,特色小鎮的開發,有四個領域是非常可觀的 一 鄉村旅遊產品 隨著城市化程序的加快,都市人歸隱田園夢之下的鄉村旅遊產品前景廣闊,鄉村的生態環境好,能更好地親近自然和享受有機生態食品,很多遊客到鄉村已不再是單純的旅遊,而是被鄉村的環境所吸引,在當地較長時間地生活和居住,鄉村旅遊已...

如何看待知乎使用 React 重構?

碼農投資筆記 其實兩個框架都可以用,最終的選擇還是來自工程師的偏好。如果我們公司的專案可以重新選框架,我們一定會投給vue,而不是react,可惜我們那個專案是14年開啟的,那時vue還沒成熟。 Amelia 多庫並存,莫名其妙消耗流量費。closure系高逼格,Google那麼複雜的頁面也能hol...

React什麼場景不該使用PureComponent

九仙大當家 PureComponent相比於Component,在shouldComponentUpdate階段多了一層淺比較。什麼意思呢?Component不管三七二十一,直接返回true,這意味著即是前後的state props沒有任何改變,React還是會進行一遍re render,當然最後的...