⑴ react緩存函數的方法
給需要緩存的函數加一層高階組件，在高階組件中通過ref獲取到該組件的實例，在ComponentDidMount中通過ref獲取到的實例，調用組件的setState方法，把緩存的上一次的state數據注入進去，在ComponentWillUnmount中通過ref獲取到的實例，去獲取其所有state的值，並存在緩存中。
React 的函數組件是React 組件的另一種定義方式，兩種方式都可以用於定義組件，但是相比於類組件，函數組件要更簡單好用些。
由於 React的設計思想極其獨特，屬於革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。
⑵ react + tabs 切換有緩存不重新發起請求
可以看到當tab 切換的時候我有個change 事件
在子組件內部 我做了個處理
這樣 每當切換的時候 就會有一個 不同的key 傳下去 一對比 再次發起請求就好啦
下面進行一個優化
因為我這個內部組件是循環得到的
因此我每次循環都會有個對比 而組件內部就會有個不同的key 做比較 我循環多少次 其實組件就發送了多少個請求 這明顯是不合理的
⑶ 在 React 中實現 keep alive
什麼是 keep alive
在 Vue 中，我們可以使用 keep-alive 包裹一個動態組件，從而 緩存 不活躍的實例，而不是直接銷毀他們：
這對於某些路由切換等場景非常好用，例如，如果我們需要實現一個列表頁和詳情頁，但在用戶從詳情頁返回列表的時候，我們不希望重新請求介面獲取，也不希望重置列表的過濾、排序等條件，那這時就可以對列表頁的組件用 keep-alive 包裹一下，這樣，當路由切換時，Vue 會將這個組件「 失活 」並緩存起來，而不是直接卸載掉。
而在 React 中，其實一直以來都沒有官方的 keep alive 解決方案，大部分開發者可能都會直接使用 display: none 來將 DOM 隱藏：
但這種方案其實只是在「 視覺上 」將元素隱藏起來了，並沒有真正的移除，那有沒有可能把 DOM 樹真的移除掉，同時又讓組件不被銷毀呢？
這是 React 官方文檔 上對 Portal 特性的介紹，值得注意的是，這里只是說「父組件以外的 DOM 節點」，但沒有要求這個 DOM 節點是真的在頁面上，還是 只是存在於內存中 。 因此，我們可以先通過 document.createElement 在內存中創建一個元素，然後再通過 React.createPoral 把 React 子節點渲染到這個元素上，這樣就實現了「空渲染」。
基於這種方案，我們可以進一步封裝出一個 Conditional 組件，從而實現通用性的條件渲染邏輯：
首先，我們創建了一個 targetElement ，並且通過 createPortal 將 children 渲染到 targetElement 。 然後，我們會創建一個容器 div 元素，並且通過 containerRef 拿到它的引用。 最後，當 active 為 true 時，我們會把 targetElement 手動添加到 containerRef.current 的內部，反之，則會從其內部移除掉 targetElement 。 實際使用的方式如下：
細心的讀者可能會發現，目前我們的 Conditional 組件還有一點小小的瑕疵：當組件初次渲染時，不論當前的 active 是 true 還是 false ， Conditional 組件都會將 props.children 渲染。這對大型應用可能會帶來非常明顯的性能問題，所以，我們可以為其增加「 懶載入 」的特性：
不得不承認的是，基於 Portal 方案的 Conditional 組件並不能包治百病，和 Vue 的 keep-alive 相比，也存在不少缺憾：
⑷ react在瀏覽器緩存對象
useRecer。因為瀏覽器內部運用了useRecer狀態管理，管理緩存狀態，可以更靈活，操縱緩存路由組件，採用reacthooks全新api，渲染節流，手動解除緩存，增加了緩存的狀態周期，監聽函數等。
⑸ React實現數據驅動的tab頁緩存
在開發後台管理頁面的時候，會遇到緩存Tab頁面數據的需求。在開發時也希望能夠使用數組驅動的方式控制Tab頁的緩存，並且使用API進一步控制tab頁緩存或者其他頁緩存。
之前關注的開發者新寫了一個模塊，正好滿足了我的需求
react-activation: https://github.com/CJY0208/react-activation
原理應該是把Alive組件下的dom掛載到Provider組件的display:none的一個節點，當路由切回來時，在從provider中找之前掛在的alive dom。作者已經幫我們實現了，用就是了。
使用react-activation提供的KeepAlive組件包裹你的頁面組件，控制KeepAlive的when值
作者提供了demo： 可關閉的路由 tabs 示例
但這個是API控制的，我更希望使用一個[]數據來驅動tabs和頁面緩存
使用rex管理這個數據，建立了一個tabs數組，我希望tabs和頁面是否被緩存，都是響應這個數組。
我寫了2個action去操作這個tabs,新增,和刪除
然後我希望rex中的tabs的變化，能觸發我的視圖更新，用React-Rex提供的connect將store中的tabs綁定到組件上。當tabs發生變化時，我的緩存組件就能響應到，從而改變keepAlive的when值，實現緩存控制
當組件已經能響應tabs的變化時，添加更多功能【關閉/關閉其他/關閉到右側/關閉全部】，通過寫不同的action操作tabs數組就可以了
⑹ react 頁面緩存插件react-router-cache-route
此插件可以滿足緩存上一頁的功能，即：返回上一頁的時候，上一頁的滾動條、動作狀態等等和離開這個頁面時的狀態保持一致。
搭配 react-router 工作的、帶緩存功能的路由組件，類似於 Vue 中的 keep-alive 功能。
Route 中配置的組件在路徑不匹配時會被卸載（render 方法中 return null），對應的真實節點也將從 dom 樹中刪除，利用Route暴露的children方法，讓我們手動控制渲染。
注意：作者測試使用時版本為1.4.6
緩存語句不要寫在 Switch 組件當中，因為 Switch組件會卸載掉所有非匹配狀態下的路由，需使用 CacheSwitch 替代 Switch。
使用 when 屬性決定何時使用緩存功能，可選值為 [forward, back, always] ，默認值為 forward。
使用 className 屬性給包裹組件添加自定義樣式。
也可以使用 behavior 屬性來自定義緩存狀態下組件的隱藏方式，工作方式是根據 CacheRoute 當前的緩存狀態，返回一個作用於包裹組件的 props。
使用 CacheRoute 的組件將會得到一個名為 cacheLifecycles 的屬性，裡麵包含兩個額外生命周期的注入函數 didCache 和 didRecover，分別用在組件 被緩存 和 被恢復 時
github地址
⑺ React Native性能優化：預載入和緩存View
參考 比如我們做IM的時候，從會話列表進入聊天窗口，經常會有點卡頓感覺，因為聊天對話界面的結構相對比較復雜。如果每次進去都需要重新構建渲染，肯定無法在16ms內完成。解決方法就是准備一個聊天對話界面的樣板，在app啟動的時候將它預先載入。當需要渲染的時候，只需要將修改對應的值就可以，退去時不要去銷毀它，直接cache下來留給下次使用。
具體在react native上怎麼實現，這需要定製自己的navigator，因為react native提供的navigator沒有這種功能。具體原理就是在navigator的render函數里一直保留需要預先載入和緩存的view，當不需要顯示的時候將它隱藏起來。同時需要緩沖的view一定要有初始樣板。
⑻ react緩存頁面react-keepalive-router
https://blog.csdn.net/sinat_17775997/article/details/123211231
⑼ react hooks之useDebounce useThrottle
防抖：觸發高頻事件後n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。
節流：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率。
備註：createRef 每次渲染都會返回一個新的引用，而 useRef 每次都會返回相同的引用。
每次組件重新渲染，都會執行一遍所有的hooks，這樣debounce高階函數裡面的timer就不能起到緩存的作用（每次重渲染都被置空）。timer不可靠，debounce的核心就被破壞了。使用useRef的目的就是為了解決這個問題。
useRef實現了React組件的緩存機制。
⑽ react-native 怎麼解決緩存設置和局部刷新問題
首先使用reactnative編寫一個簡單的應用，在碰到問題的時候，肯定需要對代碼進行調試。目前reactnative支持在Chrome瀏覽器內進行調試。需要選擇Scheme->Run的選項為Debug,否則模擬器中不會出現調試選項。將應用設置為在模擬器中運行，運行後，按...