React状态管理-对state进行保留和重置

相同位置的相同组件会使得 state 被保留下来


当你勾选或清空复选框的时候,计数器 state 并没有被重置。不管 isFancytrue 还是 false,根组件 App 返回的 div 的第一个子组件都是 <Counter />

你可能以为当你勾选复选框的时候 state 会被重置,但它并没有!这是因为 两个 标签被渲染在了相同的位置。 React 不知道你的函数里是如何进行条件判断的,它只会"看到"你返回的树。在这两种情况下,App 组件都会返回一个包裹着 作为第一个子组件的 div。这就是 React 认为它们是 同一个 的原因。

你可以认为它们有相同的"地址":根组件的第一个子组件的第一个子组件。不管你的逻辑是怎么组织的,这就是 React 在前后两次渲染之间将它们进行匹配的方式。

相同位置的不同组件会使 state 重置


在相同位置重置 state

相关推荐
阿民不加班19 小时前
【React】打卡笔记,入门学习01:点击事件
笔记·学习·react.js
菠萝+冰19 小时前
React-Window 虚拟化滚动
前端·react.js·前端框架
皓月Code19 小时前
第三章、React项目国际化介绍(`react-i18next`)
前端·javascript·react.js·1024程序员节
加蓓努力我先飞19 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
豆苗学前端19 小时前
企业级用户登录Token存储最佳实践,吊打面试官
前端·javascript·后端
inx17719 小时前
HTML 敲击乐 PART--2
javascript·css
社恐的下水道蟑螂19 小时前
用CSS3拍一部《星球大战》片头?前端导演的"原力"修炼指南
前端·javascript
Juzisuan19 小时前
深入解析 forEach 与 for...of 在循环体中执行 await 时的区别
javascript
濑户川20 小时前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
VT.馒头20 小时前
【力扣】2725. 间隔取消
javascript·leetcode·1024程序员节