React 保留和重置State

目录
  • 前言
  • 一、state保留
  • 二、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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • react函数组件useState异步,数据不能及时获取到的问题

    react函数组件useState异步,数据不能及时获取到的问题

    目录 react useState异步,数据不能获取到 问题 解决方法一 react中useState的使用及注意事项 基本使用 注意事项 react useState异步,数据不能获取到 useState() 属于异步函数,在useState() 第一次存储的时候,值会存储不上 因为react中state的更新是异步的,我们setState后,react不会立刻对值进行改变,而是将其暂时放入pedding队列中.react会合并多个state,然后值render一次,所以不要在循环中使用use

  • react中使用usestate踩坑及解决

    react中使用usestate踩坑及解决

    目录 usestate的常规用法 useState遇到的坑 1.useState不适合复杂对象的更改 2.useState异步回调的问题 3.根据hook的规则,使用useState的位置有限制 4.使用useState,回调函数形式更改数据 5.useState存入的值只是该值的引用(引用类型) 6.useState,如果保存引用数据,useEffect检测不到变化? 7.useState无法保存一个函数 useState实现原理 usestate的常规用法 在react框架中,不适用类组件,

  • React在组件中如何监听redux中state状态的改变

    React在组件中如何监听redux中state状态的改变

    目录 在组件中监听redux中state状态的改变 解决方式 React和redux的状态处理 在组件中监听redux中state状态的改变 解决方式 1.在组件中引入store 2.在constructor构造器方法中,重写store.subscribe方法(该方法即是监听state状态改变的放过) 组件完整代码如下: import React, { Component } from 'react' import CSSModules from 'react-css-modules'  imp

  • React Hook中useState更新延迟问题及解决

    目录 React Hook中useState更新延迟 React Hook useState连续更新对象问题 React Hook中useState更新延迟 方法一:去掉useEffect的第二个参数 例如以下代码 错误实例 const[zoom, setZoom] = useState(0); useEffect(() = >{     document.getElementById('workspace-content').addEventListener('mousewheel', scr

  • react中(含hooks)同步获取state值的方式

    目录 react(含hooks)同步获取state值 环境 代码示例 异步写成同步的方法 react hooks常用方法 1.useState 2.useEffect 3.useContext上下文传值 4.useReducer 5.useMemo 6.useRef react(含hooks)同步获取state值 环境 "dependencies": {     "babel-plugin-transform-decorators-legacy": "^1

  • react使用useState修改对象或者数组的值无法改变视图的问题

    react使用useState修改对象或者数组的值无法改变视图的问题

    目录 使用useState修改对象或者数组的值无法改变视图 解决办法 关于useState使用及注意事项 一.基本使用 二.注意事项 使用useState修改对象或者数组的值无法改变视图 在react中使用useState无法改变视图,数据改变但是视图未改变 未渲染的代码如下: const [needLists,setNeedLists]=useState([]) const pressDownEnter=(e)=>{     if(e.keyCode===13){       needList

  • React 保留和重置State

    React 保留和重置State

    目录 前言 一.state保留 二.state重置 总结 前言 在开发时,我们复用一个组件,比如说切换不同的聊天窗口,这个窗口是公用的组件<Chat/>聊天窗口.<ContactList/>组件,控制不同人的id去切换不同的窗口和一个父组件<Messenger/>, <Chat/>包含的state值:text. import { useState } from 'react'; export default function Chat({ contact }

  • React Hook之使用State Hook的方法

    目录 等价的class示例 Hook和函数组件 Hook是什么? 声明State变量 读取State 更新State 小结 提示:方括号有什么用? 提示:使用多个state变量 总结 Hook 简介章节中使用下面的例子介绍了 Hook: import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to compo

  • React 三大属性之state的使用详解

    React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了.state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染.这里分别介绍一下在类和函数组件中state的写法: 类组件 class ClassComponent extends React.Component{ constructor(props){ super(props) } //可写可不写 r

  • react学习笔记之state以及setState的使用

    在react中通过 state 以及 setState() 来控制组件的状态. state state 是 react 中用来存储组件数据状态的,可以类比成 vue 中的 data. 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作

  • React 组件中的state和setState()你知道多少

    目录 state的基本使用 setState()修改状态 解决方法: 总结 state的基本使用 状态(state)即数据,是组件内部的私有数据,只能在组件内部使用 state的值是对象,可以通过this.state来获取状态. setState()修改状态 状态是可变的,可以通过this.setState({要修改的数据})来改变状态 注意:跟vue语法不同,不要直接修改state中的值,这时错误的! //正确 this.setState({ count:this.state.count+1

  • vue和react中props变化后如何修改state

    vue和react中props变化后如何修改state

    目录 vue和react中props变化后修改state 改进 react改变state必须知道的知识点 1.不能直接修改state 2.state的更新是异步的 3.state的更新是一个合并的过程 state与不可变对象 vue和react中props变化后修改state 如果只想在 state 更改时重新计算某些数据,比如搜索框案例. vue <template> <div> <input type="text" v-model="filt

  • React props和state属性的具体使用方法

    在上一节中,我们讲到了React组件,说了如何使用ES6类创建一个React组件并在其他的地方使用它.这一节我们将讲到React组件的两大灵魂--props和state. props 不知道大家还记不记得xml标签中的属性,就像这样: <class id="1"> <student id="1">John Kindem</student> <student id="2">Alick Ice</

  • React组件三大属性之state,props,refs

    React组件三大属性之state,props,refs

    目录 1.1基本理解和使用 1.1.1 使用React开发者工具调试 1.1.2 定义组件的方式 1.1.3 注意 1.1.4 渲染类组件标签的基本流程 1.2 组件实例的三大核心属性之一:state 1.2.1 理解 1.2.2 案例 1.2.3 在类式组件使用state 1.2.4 在类式组件使用state的简写方式 1.2.3 强烈注意 1.3 组件实例的三大核心属性之一:props 1.3.1 理解 1.3.3 作用 1.3.4 在类式组件使用props 1.3.5 在函数式组件使用pr

  • 使用react在修改state中的数组和对象数据的时候(setState)

    使用react在修改state中的数组和对象数据的时候(setState)

    目录 react修改state的数组和对象数据的时候(setState) 需要注意 react修改数组对象的注意事项 删除数组中的指定元素 合并两个对象 修改多层级对象的值 react修改state的数组和对象数据的时候(setState) 首先在修改状态数据(state)的时候,我们要遵循react的规则,使用setState()方法去修改 此时修改的数据是一个数组或者是一个对象的时候,setState中传递一个对象是不能够满足的,此时就需要给setState中传递函数了! 此时函数中的参数s

  • 封装一个最简单ErrorBoundary组件处理react异常

    封装一个最简单ErrorBoundary组件处理react异常

    前言 从 React 16 开始,引入了 Error Boundaries 概念,它可以捕获它的子组件中产生的错误,记录错误日志,并展示降级内容,具体 官网地址 错误边界避免一个组件错误导致整个页面白屏不能使用等情况,使用优雅降级的方式呈现备用的 UI,错误边界可以在渲染期间.生命周期和整个组件树的构造函数中捕获错误.自 React 16 起,任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载 ErrorBoundary 意义 某些 UI 崩溃,不至于整个 webapp 崩溃 在浏

随机推荐