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

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

2023-08-07 72
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 解决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方法
鋜斗
目录
相关文章
大树营养快线
|
25天前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。
大树营养快线
31 3
最好zzz
|
1月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件：支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中，集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架，结合阿里巴巴的通义千问（一个强大的自然语言处理服务），并通过自定义React组件来支持服务器发送事件（SSE, Server-Sent Events）的EventStream数据解析。这一组合不仅能够实现高效的实时通信，还能利用AI技术提升用户体验。
最好zzz
162 2
听白
|
1月前
|
前端开发 JavaScript 容器
React 元素渲染
10月更文挑战第7天
听白
25 1
夏天49597
|
6天前
|
前端开发 UED 开发者
React 数据表格分页实现
本文详细介绍了如何在React中实现数据表格的分页功能，包括基础实现、常见问题及解决方案。通过状态管理和事件处理，我们可以有效地减少页面加载时间，提升用户体验。文章提供了完整的代码示例，帮助开发者解决分页按钮样式、按钮过多和初始加载慢等问题，并给出了相应的优化方案。
夏天49597
80 53
光明顶阳顶天
|
30天前
|
监控 前端开发 UED
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求，合理运用相关特性和策略，不断进行优化和调整，以达到最佳的性能提升效果。同时，要密切关注 React 的发展和更新，以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法，让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
光明顶阳顶天
104 59
夏天49597
|
7天前
|
前端开发 搜索推荐 测试技术
React 数据表格排序与过滤
本文介绍了如何在 React 中实现数据表格的排序和过滤功能，从基础概念到实际代码实现，涵盖排序和过滤的基本原理、实现步骤、常见问题及解决方法。通过合理管理状态、优化性能和避免常见错误，帮助开发者提高用户体验和开发效率。
夏天49597
23 4
想飞的雪糕
|
22天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新：深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点，探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化，React 利用虚拟 DOM 和 `diffing` 算法优化更新，Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略，如使用 `key`、分片渲染、虚拟滚动等，帮助开发者在处理大型数组时提升性能。总结指出，选择合适的框架应根据项目复杂度和性能需求来决定。
想飞的雪糕
34 2
夏天49597
|
1月前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库，用于构建用户界面。本文从基础概念出发，深入探讨了 React 渲染优化的常见问题及解决方法，包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题，并提供了代码示例，帮助开发者提升应用性能。
夏天49597
51 6
大树营养快线
|
1月前
|
前端开发
react hooks父组件调用子组件方法？
【10月更文挑战第6天】
大树营养快线
321 4
六卿
|
2月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组，将页面所有数据进行替换（解决问题思路）____一个按钮使得页面所有接口重新请求
在React或Vue中，若需在更改用户所属组后更新页面所有数据但不刷新整个页面，可以通过改变路由出口的key值来实现。在用户切换组成功后，更新key值，这会触发React或Vue重新渲染路由出口下的所有组件，从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁，提供了更流畅的用户体验。
六卿
54 1
react或者vue更改用户所属组，将页面所有数据进行替换（解决问题思路）____一个按钮使得页面所有接口重新请求