React?保留和重置State

更新時(shí)間：2022年09月03日 16:46:22 作者：小成cc

這篇文章主要為大家介紹了React?保留和重置State實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

在開發(fā)時(shí)，我們復(fù)用一個(gè)組件，比如說切換不同的聊天窗口，這個(gè)窗口是公用的組件<Chat/>聊天窗口、<ContactList/>組件，控制不同人的id去切換不同的窗口和一個(gè)父組件<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è)趥?cè)邊欄切換不同的tab的時(shí)候，里面輸入的內(nèi)容沒有重置。

因?yàn)榻M件的JSX位置不變，且state是獨(dú)立的，每次傳遞新的props值to，即使會(huì)重新渲染，但并不會(huì)改變子組件已有的state值。

之前我的解決方法:

有沒有更好的解決方法？答案是有的，這就涉及到了子組件state的重置與保留。

一、state保留

當(dāng)在父組件中引入一個(gè)子組件，就會(huì)在對(duì)應(yīng)的UI tree上分配到一個(gè)位置，如果這個(gè)UI tree的位置一直沒有被修改，那么它的state值也就不會(huì)發(fā)生改變。

這種說白了，只是props值改變，子組件state依舊保留。因?yàn)榻M件并沒有從觸發(fā) (存在-->消失-->出現(xiàn)) 的情況。

二、state重置

如果要讓上面的組件里state重置，就需要在其中一個(gè)組件套著任意標(biāo)簽，組件將會(huì)出 (存在-->消失-->出現(xiàn)) 的情況。

單擊復(fù)選框時(shí)，計(jì)數(shù)器狀態(tài)將重置。雖然呈現(xiàn)了Counter，但該div的第一個(gè)子元素從div變?yōu)閟ection。section從DOM中移除時(shí)，它下面的整個(gè)樹(包括Counter和它的狀態(tài))也會(huì)被銷毀。

添加key值是最佳重置子組件state的解決方案。

優(yōu)化前