React?保留和重置State
前言
在開發(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。
當我們在側邊欄切換不同的tab的時候，里面輸入的內(nèi)容沒有重置。
因為組件的JSX位置不變，且state是獨立的，每次傳遞新的props值to，即使會重新渲染，但并不會改變子組件已有的state值。
之前我的解決方法:
有沒有更好的解決方法？答案是有的，這就涉及到了子組件state的重置與保留。
一、state保留
當在父組件中引入一個子組件，就會在對應的UI tree上分配到一個位置，如果這個UI tree的位置一直沒有被修改，那么它的state值也就不會發(fā)生改變。
這種說白了，只是props值改變，子組件state依舊保留。因為組件并沒有從觸發(fā) (存在-->消失-->出現(xiàn)) 的情況。
二、state重置
如果要讓上面的組件里state重置，就需要在其中一個組件套著任意標簽，組件將會出 (存在-->消失-->出現(xiàn)) 的情況。
單擊復選框時，計數(shù)器狀態(tài)將重置。雖然呈現(xiàn)了Counter，但該div的第一個子元素從div變?yōu)閟ection。section從DOM中移除時，它下面的整個樹(包括Counter和它的狀態(tài))也會被銷毀。
添加key值是最佳重置子組件state的解決方案。
優(yōu)化前
優(yōu)化后
總結
- 只要相同的組件呈現(xiàn)在相同的
UI tree位置，React 就會保留state。 state不保存在JSX標記中。它與放置JSX的樹位置相關聯(lián)。- 您可以通過給子樹一個不同的
key來強制它重置狀態(tài)。
以上就是React 保留和重置State的詳細內(nèi)容，更多關于React 保留重置State的資料請關注腳本之家其它相關文章！
相關文章
我們在后臺管理系統(tǒng)React項目開發(fā)中會有Table表格、Form表單、List列表、Button按鈕等組件，這個時候我們可以使用AntDesign來減少開發(fā)中不必要的樣式問題，本文就介紹了eact項目中使用AntDesign，感興趣的可以了解一下2022-04-04
這篇文章主要給大家分享React中的useEffect四種用法，useEffect中 觸發(fā)更新，重復的 useEffect，依賴值觸發(fā)回調(diào)，useEffect 的返回值，通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
React Native開發(fā)封裝Toast與加載Loading組件示例
這篇文章主要介紹了React Native開發(fā)封裝Toast與加載Loading組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了React中編寫CSS實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家詳細介紹了React Native仿地址挑選器功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
React項目打包發(fā)布到Tomcat頁面空白問題及解決
這篇文章主要介紹了React項目打包發(fā)布到Tomcat頁面空白問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
React實現(xiàn)控制減少useContext導致非必要的渲染詳解
這篇文章主要介紹了React如何有效減少使用useContext導致的不必要渲染,使用useContext在改變一個數(shù)據(jù)時，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
下面小編就為大家?guī)硪黄猺eact.js CMS 刪除功能的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
React循環(huán)遍歷渲染數(shù)組和對象元素方式
這篇文章主要介紹了React循環(huán)遍歷渲染數(shù)組和對象元素方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，這篇文章主要介紹了react-redux的設置,需要的朋友可以參考下2022-09-09