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

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


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

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

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

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


在相同位置重置 state

相关推荐
程序媛李李李李李蕾几秒前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端
整点可乐11 分钟前
cesium实现鹰眼图
javascript·cesium
艾小码12 分钟前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
BUG创建者25 分钟前
openlayer根据不同的状态显示不同的图层颜色
android·java·javascript
南方kenny38 分钟前
Mock.js:前端开发的假数据神器
前端·javascript
AliciaIr43 分钟前
深入理解React Hook:useRef的底层机制与高级应用
前端·react.js
1024小神1 小时前
Cocos游戏开发中,如何动态加载资源和远程资源 resources
前端·javascript
猫和老许1 小时前
Vue 3 拖拽排序功能优化实现:从原理到实战应用
前端·javascript·vue.js
sq8001 小时前
ag-grid-vue3 降级,支持低版本浏览器
前端·javascript·vue.js
兔年鸿运Q小Q1 小时前
html转word下载
javascript·vue.js·word