AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

解决react中重新渲染数据时会触发onClick方法

2023-08-07 136
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 解决react中重新渲染数据时会触发onClick方法

前言

今天晚上的学习中遇到了一个问题？

就是再react根据条件渲染中遇到的问题 就是每次条件刷新 数据重新显示会触发方法


代码附上

2aac41e1512a47eba686ee5f811c41fb.png


这是定义的一个变量

970fca6e48354b53bfb71ddf78432dec.png


这里是修改变量中的值 来达到上面的span显示隐藏的效果

b7f4f855a1624e44a743bb41ff632a99.png


但是 每次重新渲染都会触发方法

1344b8bc1dd64777bb9ae0b305b315e2.png


很苦恼 后来上网上搜索的方法需要

0efa3679d1bb45e3867c02ae9e4f9624.png


就是给这个渲染的dom节点中的onClick中的方法加上箭头函数 从而实现this指向的问题 当然这是我自己比较短浅的一些理解 欢迎各位大佬来评论区指正 感谢


改正后

c00eeab942bf4456a84c297cf533f675.png


后言

加油 一起共勉

文章标签：
JavaScript
前端开发
关键词：
React Native方法
React Native数据
React Native渲染
React Native触发
react.js方法
鋜斗
目录
相关文章
sunyalei
|
6月前
|
前端开发 JavaScript 安全
除了高阶组件和render props，还有哪些在 React 中实现代码复用的方法？
除了高阶组件和render props，还有哪些在 React 中实现代码复用的方法？
sunyalei
271 62
大树营养快线
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。
大树营养快线
140 3
听白
|
前端开发 JavaScript 容器
React 元素渲染
10月更文挑战第7天
听白
121 1
光明顶阳顶天
|
监控 前端开发 UED
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求，合理运用相关特性和策略，不断进行优化和调整，以达到最佳的性能提升效果。同时，要密切关注 React 的发展和更新，以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法，让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
光明顶阳顶天
257 59
六卿
针对react-captcha-code第三方插件不能每次触发深颜色的处理
针对`react-captcha-code`插件生成浅色验证码的问题，通过改造成class组件`MyCaptcha.js`，自定义颜色和验证码生成逻辑，解决了颜色问题。
六卿
179 1
针对react-captcha-code第三方插件不能每次触发深颜色的处理
想飞的雪糕
|
JavaScript 前端开发 算法
前端优化之超大数组更新：深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点，探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化，React 利用虚拟 DOM 和 `diffing` 算法优化更新，Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略，如使用 `key`、分片渲染、虚拟滚动等，帮助开发者在处理大型数组时提升性能。总结指出，选择合适的框架应根据项目复杂度和性能需求来决定。
想飞的雪糕
535 2
夏天49597
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库，用于构建用户界面。本文从基础概念出发，深入探讨了 React 渲染优化的常见问题及解决方法，包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题，并提供了代码示例，帮助开发者提升应用性能。
夏天49597
207 6
大树营养快线
|
前端开发
react hooks父组件调用子组件方法？
【10月更文挑战第6天】
大树营养快线
1604 4
846903522
|
Android开发
jmessage-react-plugin的正确引入方法
jmessage-react-plugin的正确引入方法
846903522
86 1
小周sir
|
前端开发 JavaScript 开发者
请详细介绍React挂载阶段的方法。
请详细介绍React挂载阶段的方法。
小周sir
213 9