Web前端培訓(xùn)如何實現(xiàn)狀態(tài)保存

來源：千鋒教育 發(fā)布人：星星

2022-01-10 11:18:46|已瀏覽：179次

實現(xiàn)狀態(tài)保存

Web前端人員如何實現(xiàn)狀態(tài)保存?常用方法就什么?狀態(tài)保存，是指再次加載頁面時還原表格狀態(tài)。在Vue中，我們可以非常便捷地通過標(biāo)簽實現(xiàn)狀態(tài)的保存，該標(biāo)簽會緩存不活動的組件實例，而不是銷毀它們。但是在React中并沒有這個功能，前端人員該如何辦呢?接下來就給大家分享常用的幾個方法。

1、手動保存狀態(tài)
手動保存狀態(tài)，是比較常見的解決方式，可以配合React組件的component Will Unmount生命周期，通過redux之類的狀態(tài)管理層對數(shù)據(jù)進行保存，通過component Did Mount周期進行數(shù)據(jù)恢復(fù)。
在需要保存的狀態(tài)較少時，這種方式可以比較快地實現(xiàn)我們所需功能，但在數(shù)據(jù)量大或者情況多變時，手動保存狀態(tài)就會變成一件麻煩事。為了不需要每次都關(guān)心如何對數(shù)據(jù)進行保存恢復(fù)，我們需要研究如何自動保存狀態(tài)。
2、通過路由實現(xiàn)自動狀態(tài)保存(通常使用react-router)
1)重寫組件，可參考react-live-route。重寫可以實現(xiàn)我們想要的功能，但成本也比較高，需要注意對原始功能的保存，以及多個react-router版本的兼容。
2)替換路由庫為react-keeper。完全替換掉路由方案是一個風(fēng)險較大的事情，需要較為慎重地考慮。
3)基于組件現(xiàn)有行為做拓展，可參考react-router-cache-route。如果使用component或者render屬性，都無法避免路由在不匹配時被卸載掉的命運。但將children屬性當(dāng)作方法來使用，我們就有手動控制渲染的行為的可能。

目前的狀態(tài)保存實現(xiàn)方式都有各自的問題，但這是十分常見的需求，因此我們一定要認(rèn)真對待。如果你想了解更多React相關(guān)的知識點或?qū)W習(xí)前端知識點，參加專業(yè)學(xué)習(xí)是非常明智的選擇。

本文由培訓(xùn)無憂網(wǎng)千鋒教育專屬課程顧問老師整理發(fā)布，更多web前端課程信息可關(guān)注培訓(xùn)無憂網(wǎng)web前端培訓(xùn)頻道或添加老師微信：15033336050

注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://elsolbar.com/news-id-14189.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注web前端頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多：150 3333 6050

相關(guān)新聞

相關(guān)新聞

免費申請試聽

提交申請，《培訓(xùn)無憂網(wǎng)》課程顧問老師會一對一幫助你規(guī)劃更適合你的專業(yè)課程！