React state(及组件) 的保留与重置

当在树中相同的位置渲染相同的组件时,React 会一直保留着组件的 state

js 复制代码
return (
  <div>
    <Counter />
    {showB && <Counter />} 
  </div>
)
// 当 showB 为 false, 第二个计数器停止渲染,它的 state 完全消失了。这是因为 React 在移除一个组件时,也会销毁它的 state。
// 当 showB 再次为 true 时,另一个计数器及其 state 将从头开始初始化(score = 0)并被添加到 DOM 中。
js 复制代码
return (
  <div>
    {isFancy ? <Counter isFancy={true} /> : <Counter isFancy={false} />} 
  </div>
)
// 当 isFancy 变化时,计数器 state 并没有被重置。
// 不管 isFancy 是 true 还是 false,组件返回的 div 的第一个子组件都是 <Counter />。
// 它是位于相同位置的相同组件,所以对 React 来说,它是同一个计数器。
如何在相同位置重置 state
js 复制代码
  return (
    <div>
      {isPlayerA ? (
        <Counter person="Taylor" />
      ) : (
        <Counter person="Sarah" />
      )}
    </div>
  );
  
// Counter
  const [score, setScore] = useState(0);
  return (
    <div>
      <h1>{person} 的分数:{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        加一
      </button>
    </div>
  );
}

切换玩家时,分数会被保留下来。这两个 Counter 出现在相同的位置,所以 React 会认为它们是 同一个 Counter,只是传了不同的 person prop。

有两个方法可以在它们相互切换时重置 state:

  1. 将组件渲染在不同的位置
  2. 使用 key 赋予每个组件一个明确的身份
js 复制代码
// 1. 将组件渲染在不同的位置
  { isPlayerA && <Counter person="Taylor" /> }
  { !isPlayerA && <Counter person="Sarah" /> }
// 2. 使用 key
  { isPlayerA ? (
       <Counter key="Taylor" person="Taylor" />
     ) : (
       <Counter key="Sarah" person="Sarah" />
     )
  }
相关推荐
三思而后行,慎承诺4 分钟前
react的fiber 用法
前端·javascript·react.js
Deepsleep.22 分钟前
前端性能优化面试回答技巧
前端·面试·性能优化
阿伟来咯~1 小时前
vue3+Nest.js项目 部署阿里云
开发语言·javascript·ecmascript
不想上班只想要钱2 小时前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
Li_Ning212 小时前
为什么 Vite 速度比 Webpack 快?
前端·webpack·node.js
2501_915373882 小时前
Electron 入门指南
前端·javascript·electron
同志327133 小时前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟3 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境3 小时前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu3 小时前
Github Action + docker 实现自动化部署
前端·自动化运维