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

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


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

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

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

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


在相同位置重置 state

相关推荐
独立开阀者_FwtCoder15 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
Hilaku23 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿23 分钟前
Js事件循环
javascript
datagear23 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
namehu31 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
多啦C梦a33 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
王小明max40 分钟前
Metis UI:下一代 React 组件库,重新定义前端开发体验
react.js
yvvvy1 小时前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript
一头小鹿1 小时前
Vue 和 React中的状态管理机制
vue.js·react.js
jqq6661 小时前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js