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

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


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

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

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

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


在相同位置重置 state

相关推荐
光影少年7 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js
木易 士心11 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
uhakadotcom11 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
闲蛋小超人笑嘻嘻12 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
小牛itbull12 小时前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript·electron
卷娄13 小时前
prism-react-renderer 扩展语言模块
react.js
rggrgerj13 小时前
Vue3 组件完全指南代码
前端·javascript·vue.js
matrixmind114 小时前
Nivo 用React打造精美数据可视化的开源利器
其他·react.js·信息可视化·开源
在逃的吗喽15 小时前
Vue3新变化
前端·javascript·vue.js