react不同元件处于同一位置复位状态

简介: react不同元件处于同一位置复位状态

勾选复选框将替换为:<Counter><p>

import { useState } from 'react';
 
export default function App() {
  const [isPaused, setIsPaused] = useState(false);
  return (
    <div>
      {isPaused ? (
        <p>See you later!</p> 
      ) : (
        <Counter /> 
      )}
      <label>
        <input
          type="checkbox"
          checked={isPaused}
          onChange={e => {
            setIsPaused(e.target.checked)
          }}
        />
        Take a break
      </label>
    </div>
  );
}
 
function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);
 
  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
 
  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

在这里,您可以在同一位置的不同组件类型之间切换。最初,它的第一个子项包含一个 .但是当你换入 时,React 会从 UI 树中删除 并销毁其状态。<div>CounterpCounter此外,当您在同一位置渲染不同的组件时,它会重置其整个子树的状态。要了解其工作原理,请递增计数器,然后勾选复选框:

import { useState } from 'react';
 
export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? (
        <div>
          <Counter isFancy={true} /> 
        </div>
      ) : (
        <section>
          <Counter isFancy={false} />
        </section>
      )}
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={e => {
            setIsFancy(e.target.checked)
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}
 
function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);
 
  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }
 
  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

单击该复选框时,计数器状态将重置。虽然你渲染了 ,但从 a 变为 a 的第一个子项。当子项从 DOM 中移除时,它下面的整棵树(包括它的状态)也被破坏了。CounterdivdivsectiondivCounter

相关文章
|
Kubernetes 安全 API
国内首个云上容器ATT&CK攻防矩阵发布,阿里云助力企业容器化安全落地
本文对云上容器ATT&CK攻防矩阵做了详细阐述,希望能帮助开发和运维人员了解容器的安全风险和落地安全实践。
国内首个云上容器ATT&CK攻防矩阵发布,阿里云助力企业容器化安全落地
|
存储 数据采集 监控
Telegraf 使用小结
Telegraf 使用小结
247 1
|
机器学习/深度学习 供应链 安全
量子计算在物流中的应用前景?
【8月更文挑战第4天】量子计算在物流中的应用前景?
301 2
|
缓存 安全 Linux
本地YUM源大揭秘:搭建您自己的Linux软件宝库,从此告别网络依赖!一文掌握服务器自给自足的终极技能!
【8月更文挑战第13天】在Linux中,YUM是一款强大的软件包管理工具,可自动处理依赖关系。为适应离线或特定安全需求,本指南教你搭建本地YUM源。首先创建存放软件包的`localrepo`目录,复制`.rpm`文件至其中。接着,安装并运用`createrepo`生成仓库元数据。随后配置新的`.repo`文件指向该目录,并禁用GPG检查。最后,清理并重建YUM缓存,即可启用本地YUM源进行软件搜索与安装,适用于网络受限环境。
769 3
|
Arthas 监控 Java
慢调用链诊断利器-ARMS 代码热点
慢调用链诊断利器-ARMS 代码热点
359 79
|
网络协议 算法 数据安全/隐私保护
高频面试题:部署OSPF后,为啥无法建邻居关系?
高频面试题:部署OSPF后,为啥无法建邻居关系?
350 0
|
存储 JavaScript 前端开发
简易留言板功能
简易留言板功能
|
数据库
uniapp 【专题详解 -- 时间】云数据库时间类型设计,时间生成、时间格式化渲染(uni-dateformat 组件的使用)
uniapp 【专题详解 -- 时间】云数据库时间类型设计,时间生成、时间格式化渲染(uni-dateformat 组件的使用)
436 0
|
NoSQL Linux 网络安全
Redis 客户端工具
Redis 客户端工具
810 0
|
SQL 数据库
SQL FULL OUTER JOIN 关键字:左右表中所有记录的全连接解析
SQL RIGHT JOIN关键字返回右表(table2)中的所有记录以及左表(table1)中的匹配记录。如果没有匹配,则左侧的结果为0条记录。
361 0