脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 保留重置State

React 保留和重置State

 更新时间：2022年09月03日 16:46:22   作者：小成cc  
这篇文章主要为大家介绍了React 保留和重置State实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

在开发时，我们复用一个组件，比如说切换不同的聊天窗口，这个窗口是公用的组件<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/>触发setTo改变To的值。

export default function ContactList({
  selectedContact,
  contacts,
  onSelect
}) {
  return (
    <section className="contact-list">
      <ul>
        {contacts.map(contact =>
          <li key={contact.id}>
            <button onClick={() => {
             // 调用setTo改变To的值
              onSelect(contact);
            }}>
              {contact.name}
            </button>
          </li>
        )}
      </ul>
    </section>
  );
}

<Messenger/>管理state值:To。

当我们在侧边栏切换不同的tab的时候，里面输入的内容没有重置。

因为组件的JSX位置不变，且state是独立的，每次传递新的props值to，即使会重新渲染，但并不会改变子组件已有的state值。

之前我的解决方法:

有没有更好的解决方法？答案是有的，这就涉及到了子组件state的重置与保留。

一、state保留

当在父组件中引入一个子组件，就会在对应的UI tree上分配到一个位置，如果这个UI tree的位置一直没有被修改，那么它的state值也就不会发生改变。

这种说白了，只是props值改变，子组件state依旧保留。因为组件并没有从触发 (存在-->消失-->出现) 的情况。

二、state重置

如果要让上面的组件里state重置，就需要在其中一个组件套着任意标签，组件将会出 (存在-->消失-->出现) 的情况。

单击复选框时，计数器状态将重置。虽然呈现了Counter，但该div的第一个子元素从div变为section。section从DOM中移除时，它下面的整个树(包括Counter和它的状态)也会被销毁。

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

优化前

优化后

总结

  • 只要相同的组件呈现在相同的UI tree位置，React 就会保留state。
  • state不保存在JSX标记中。它与放置JSX的树位置相关联。
  • 您可以通过给子树一个不同的key来强制它重置状态。

以上就是React 保留和重置State的详细内容，更多关于React 保留重置State的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • ReactNative 之FlatList使用及踩坑封装总结

    ReactNative 之FlatList使用及踩坑封装总结

    本篇文章主要介绍了ReactNative 之FlatList使用及踩坑封装总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 为什么说form元素是React的未来

    为什么说form元素是React的未来

    这篇文章主要介绍了为什么说form元素是React的未来，本文会带你聊聊React围绕form的布局与发展，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • React Router 中实现嵌套路由和动态路由的示例

    React Router 中实现嵌套路由和动态路由的示例

    React Router 是一个非常强大和灵活的路由库，它为 React 应用程序提供了丰富的导航和 URL 管理功能，能够帮助我们构建复杂的单页应用和多页应用，这篇文章主要介绍了React Router 中如何实现嵌套路由和动态路由,需要的朋友可以参考下
    2023-05-05
  • React更新渲染原理深入分析

    React更新渲染原理深入分析

    什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你对这些问题还不是很明白，那么可以在这篇文章中找到答案
    2022-12-12
  • 详解React如何优雅地根据prop更新state值

    详解React如何优雅地根据prop更新state值

    这篇文章主要为大家详细介绍了React如何优雅地实现根据prop更新state值,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以了解下
    2023-11-11
  • React自定义视频全屏按钮实现全屏功能

    React自定义视频全屏按钮实现全屏功能

    这篇文章主要介绍了React自定义视频全屏按钮实现全屏功能，通过绘制全屏按钮，并绑定点击事件，编写点击事件，通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • React中上传图片到七牛的示例代码

    React中上传图片到七牛的示例代码

    本篇文章主要介绍了React中上传图片到七牛的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • React利用scheduler思想实现任务的打断与恢复

    React利用scheduler思想实现任务的打断与恢复

    这篇文章主要为大家详细介绍了React如何利用scheduler思想实现任务的打断与恢复,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
    2024-03-03
  • React useCallback详细使用教程

    React useCallback详细使用教程

    useCallback是react中比较重要的一个hook，useCallback 用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用
    2022-11-11
  • react 路由跳转的7种方式实现

    react 路由跳转的7种方式实现

    本文介绍了React中六种常见的路由跳转方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-03-03

最新评论