React子组件内部变量不更新有缓存

最新推荐文章于 2025-07-15 18:31:07 发布

原创最新推荐文章于 2025-07-15 18:31:07 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文介绍了一种在React中更新组件并清除缓存数据的方法，通过在组件外部的div上添加key，以及利用state来控制组件的重新渲染，确保每次组件更新时都能接收最新数据，避免了因缓存导致的问题。

1：在组件外所在的div添加key
在这里插入图片描述

2：使用state，清除组件元素

this.botom_element  = "";
this.setState({ _render:  !this.state._render },
 ()=>{
	this.botom_element = <Radio data={ newData } />
}) 
清除组件所在元素，渲染，再次传入新数据，组件内部变量就不会有缓存

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tcllxxl

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

React中类组件与函数组件的区别

fighting ~的博客

03-23

3939

默认情况下，自定义组件不会暴露它们内部 DOM 节点的 ref。像这样将自定义子组件包装在。

React 组件类型详解：类组件 vs. 函数组件

vvilkin的学习备忘

04-17

1377

React 是一个用于构建用户界面的 JavaScript 库，其核心思想是组件化开发。React 组件可以分为类组件（Class Components）和函数组件（Function Components），它们在设计理念、使用方式和适用场景上有所不同。随着 React Hooks 的引入，函数组件的能力得到了极大增强，逐渐成为开发者的首选。

参与评论您还未登录，请先登录后发表或查看评论

React+antd使用组件缓存CacheRoute遇到的问题

qq_44000859的博客

07-07

2272

React使用CacheRoute遇到的一些问题

React 函数式组件缓存原理

PingMinWangZi的博客

11-01

5250

对 React 函数式组件缓存的思考自从 React 16.8 版本推出 Hooks 用法以来，围绕函数组件的优化出现了各种不同的思考。本篇文章从 React 底层 Render 角度，分析 React 的渲染缓存机制。思考 memo 在函数组件局部内容缓存中发挥的作用。从 JSX 谈起我们知道在浏览器中运用 React 技术栈，必不可少的需要两部分东西。一个是 React 本身，另外一个是 React-dom。React 中渲染页面及交互的本质是运用 JS 的各类操作 DOM 的 API ...

react 定义组件变量

madehaiyoushei的博客

10-17

1万+

react定义变量： constructor(){ super(); this.state={ timer:0 } } 方法： functionA(){ console.log("this is functionA!"); } 引用 onClick={this.functionA.bind...

【特性】React useState不会使组件刷新问题

搁浅的博客

02-28

1300

遇到了一个神奇的特性，假如 let a=b ,实际上是把b的地址赋给了a 这时候如果使用useState去赋值则不会将组建刷新因为地址一样。故用这种方法 let a= $.extend(true, {}, b); 记得import $ from 'jquery';

在 React 函数式组件中使用 useState，变量，useRef 的时机

u010565037的博客

04-29

3526

变量变量在每次组件重新渲染的时候都会被重新进行赋值，所以如果你想要保留之前操作的状态的话就不要使用变量 useState 组件更新不会改变之前的状态，可以保存状态 useRef 也可以保存我们的状态那么问题来了：我们什么时候该用 useState 什么时候该用 useRef 呢？ useState: 当我们需要在状态改变的时候重新渲染视图，那么我们就使用 useState 来保存我们的状态 useRef: 如果我们只是想保存状态，而且可以同步更新&获取我们的状态，那么就使用 useR

React 设置变量要求不能更新子组件

最新发布

08-21

如果希望在设置变量时避免更新子组件，可以通过以下几种方式实现： ### 使用 `React.memo` 避免子组件不必要的更新 `React.memo` 是一个高阶组件，用于对函数组件进行浅比较，避免在父组件状态更新时子组件不必要...

React组件重复渲染的成因与优化策略

zzjlhlcd的博客

03-19

376

React 组件的重复渲染是性能优化中的关键问题。通过合理使用React.memo和、优化useEffect和、避免内联函数和对象、优化 Context API 的使用以及按需加载组件，可以有效减少不必要的渲染。希望本文的优化策略能帮助你在 React 开发中提升应用性能。

React响应式组件范式：从类组件到Hooks

技术分享

07-15

1384

本文深入解析了React响应式设计的演进过程，对比类组件与Hooks两种范式的实现原理和工程实践。类组件通过生命周期方法和实例状态管理UI更新，存在逻辑碎片化和闭包陷阱等问题；而Hooks采用基于闭包与链表的组件状态快照，实现了状态与副作用的原子化封装。Hooks通过声明式副作用和依赖跟踪机制，解决了类组件的"嵌套地狱"问题，同时借助Fiber架构支持异步渲染。文章还探讨了状态与副作用的核心概念，展示了React如何通过单向数据流和虚拟DOM实现高效UI更新。

React（3）变量使用、变量更新、父子组件变量传递

qq20004604的博客

02-09

1万+

5、变量被中括号包含。 let foo = 'world' class HelloWord extends React.Component { render() { return <div className={domClass}> Hello，{foo} </div> } } 6、组件...

正确使用React组件缓存

weixin_46787337的博客

12-10

2029

正常来讲的话当我们点击组件的时候，该组件以及该组件的子组件都会重新渲染，但是如何避免子组件重新渲染呢，我们经常用memo来解决。

React&Vue系列：变量的定义

Cipher_Y的博客

07-21

875

在 React 中，如果不讨论类组件的写法，那么就是函数组件。无状态的函数组件有状态的函数组件无状态的函数组件，就仅仅展示数据而已。而针对有状态的函数组件，就需要利用 hooks 的写法来定义状态（也就是变量）。常用的定义方式还是采用 useState 的方式，useReducer 面对多变量定义，也是一种不错的选择。当然还有一种定义方式：useRef，这里就不多做解释了。

react实现组件状态缓存

范德萨的博客

02-01

2350

在移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上

react父组件更改props子组件无法刷新原因

lvfengxian2019的博客

09-06

7098

react父子传值问题

react：重置清除数据的方法