React?保留和重置State
前言
在開發(fā)時，我們復(fù)用一個組件，比如說切換不同的聊天窗口，這個窗口是公用的組件<Chat/>聊天窗口、<ContactList/>組件，控制不同人的id去切換不同的窗口和一個父組件<Messenger/>，
<Chat/>包含的state值:text。
import { useState } from 'react';
export default function Chat({ contact }) {
const [text, setText] = useState('');
return (
<section className="chat">
<textarea
value={text}
placeholder={'Chat to ' + contact.name}
onChange={e => setText(e.target.value)}
/>
<br />
<button>Send to {contact.email}</button>
</section>
);
}
<ContactList/>觸發(fā)setTo改變To的值。
export default function ContactList({
selectedContact,
contacts,
onSelect
}) {
return (
<section className="contact-list">
<ul>
{contacts.map(contact =>
<li key={contact.id}>
<button onClick={() => {
// 調(diào)用setTo改變To的值
onSelect(contact);
}}>
{contact.name}
</button>
</li>
)}
</ul>
</section>
);
}
<Messenger/>管理state值:To。
當(dāng)我們在側(cè)邊欄切換不同的tab的時候，里面輸入的內(nèi)容沒有重置。
因為組件的JSX位置不變，且state是獨立的，每次傳遞新的props值to，即使會重新渲染，但并不會改變子組件已有的state值。
之前我的解決方法:
有沒有更好的解決方法？答案是有的，這就涉及到了子組件state的重置與保留。
一、state保留
當(dāng)在父組件中引入一個子組件，就會在對應(yīng)的UI tree上分配到一個位置，如果這個UI tree的位置一直沒有被修改，那么它的state值也就不會發(fā)生改變。
這種說白了，只是props值改變，子組件state依舊保留。因為組件并沒有從觸發(fā) (存在-->消失-->出現(xiàn)) 的情況。
二、state重置
如果要讓上面的組件里state重置，就需要在其中一個組件套著任意標(biāo)簽，組件將會出 (存在-->消失-->出現(xiàn)) 的情況。
單擊復(fù)選框時，計數(shù)器狀態(tài)將重置。雖然呈現(xiàn)了Counter，但該div的第一個子元素從div變?yōu)閟ection。section從DOM中移除時，它下面的整個樹(包括Counter和它的狀態(tài))也會被銷毀。
添加key值是最佳重置子組件state的解決方案。
優(yōu)化前
優(yōu)化后
總結(jié)
- 只要相同的組件呈現(xiàn)在相同的
UI tree位置，React 就會保留state。 state不保存在JSX標(biāo)記中。它與放置JSX的樹位置相關(guān)聯(lián)。- 您可以通過給子樹一個不同的
key來強制它重置狀態(tài)。
以上就是React 保留和重置State的詳細(xì)內(nèi)容，更多關(guān)于React 保留重置State的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
ReactNative 之FlatList使用及踩坑封裝總結(jié)
本篇文章主要介紹了ReactNative 之FlatList使用及踩坑封裝總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了為什么說form元素是React的未來，本文會帶你聊聊React圍繞form的布局與發(fā)展，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
React Router 中實現(xiàn)嵌套路由和動態(tài)路由的示例
React Router 是一個非常強大和靈活的路由庫，它為 React 應(yīng)用程序提供了豐富的導(dǎo)航和 URL 管理功能，能夠幫助我們構(gòu)建復(fù)雜的單頁應(yīng)用和多頁應(yīng)用，這篇文章主要介紹了React Router 中如何實現(xiàn)嵌套路由和動態(tài)路由,需要的朋友可以參考下2023-05-05
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你對這些問題還不是很明白，那么可以在這篇文章中找到答案2022-12-12
詳解React如何優(yōu)雅地根據(jù)prop更新state值
這篇文章主要為大家詳細(xì)介紹了React如何優(yōu)雅地實現(xiàn)根據(jù)prop更新state值,文中的示例代碼講解詳細(xì),具有一定的參考價值,感興趣的小伙伴可以了解下2023-11-11
這篇文章主要介紹了React自定義視頻全屏按鈕實現(xiàn)全屏功能，通過繪制全屏按鈕，并綁定點擊事件，編寫點擊事件，通過實例代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了React中上傳圖片到七牛的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
React利用scheduler思想實現(xiàn)任務(wù)的打斷與恢復(fù)
這篇文章主要為大家詳細(xì)介紹了React如何利用scheduler思想實現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-03-03
useCallback是react中比較重要的一個hook，useCallback 用來返回一個函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2022-11-11
react 路由跳轉(zhuǎn)的7種方式實現(xiàn)
本文介紹了React中六種常見的路由跳轉(zhuǎn)方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-03-03