<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>渲染列表</title> <script src="script/react.development.js"></script> <script src="script/react-dom.development.js"></script> <!-- 引入babel --> <script src="script/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const name = '孙悟空'; const lang = 'cn'; /* * {} 只能用来放js表达式，而不能放语句（if for） * 在语句中是可以去操作JSX * */ // const div = <div>Hello {name}</div>; let div; if(lang === 'en'){ div = <div>hello {name}</div>; }else if(lang === 'cn'){ div = <div>你好 {name}</div>; } const data = ['孙悟空', '猪八戒', '沙和尚']; /* <ul> <li>孙悟空</li> <li>猪八戒</li> ... </ul> [<li>孙悟空</li>, <li>猪八戒</li>, <li>沙和尚</li>] * */ // const arr = []; // 遍历data // for(let i=0; i<data.length; i++){ // arr.push(<li>{data[i]}</li>); // } // const arr = data.map(item => <li>{item}</li>); // 将arr渲染为一个列表在网页中显示 // jsx中会自动将数组中的元素在页面中显示 // const list = <ul>{arr}</ul>; const list = <ul>{data.map(item => <li>{item}</li>)}</ul>; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(list); </script> </body> </html>
react笔记之渲染列表
2023-02-09
94
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
react笔记之渲染列表
目录
相关文章
|
2天前
|
移动开发
前端开发
JavaScript
React音频播放列表组件：常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践，帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法，确保高效实现功能并减少调试时间。
65
30
31
|
3天前
|
前端开发
数据可视化
测试技术
React音频播放列表组件开发实战：常见问题与避坑指南
本文介绍了构建React音频播放列表组件的核心架构与常见问题解决方案。通过管理播放状态、列表索引和音频进度，结合异步控制、状态清理、节流优化等技术，确保流畅的用户体验。针对移动端兼容性、内存泄漏、列表渲染性能等问题提供了具体修复方案，并分享了自定义Hook封装、可视化音频波形等进阶实践。最后，总结了性能优化法则和测试关键点，帮助开发者打造生产级可靠的音频播放组件。
45
18
18
|
5月前
|
JavaScript
前端开发
算法
前端优化之超大数组更新：深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点，探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化，React 利用虚拟 DOM 和 `diffing` 算法优化更新，Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略，如使用 `key`、分片渲染、虚拟滚动等，帮助开发者在处理大型数组时提升性能。总结指出，选择合适的框架应根据项目复杂度和性能需求来决定。
109
2
2
|
5月前
|
前端开发
JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。
56
3
3
|
5月前
|
监控
前端开发
UED
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求，合理运用相关特性和策略，不断进行优化和调整，以达到最佳的性能提升效果。同时，要密切关注 React 的发展和更新，以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法，让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
153
59
59
|
5月前
|
前端开发
JavaScript
API
|
5月前
|
前端开发
JavaScript
|
5月前
|
JavaScript
前端开发
算法
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中，为列表组件中的每个元素添加唯一的key属性，有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除，从而优化性能并减少不必要的重新渲染。
119
0
0
|
5月前
|
前端开发
JavaScript
容器
|
5月前
|
前端开发
JavaScript
算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库，用于构建用户界面。本文从基础概念出发，深入探讨了 React 渲染优化的常见问题及解决方法，包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题，并提供了代码示例，帮助开发者提升应用性能。
83
6
6
热门文章
最新文章
1
React 音频播放器组件 Audio Player
2
Flame：开源AI设计图转代码模型！生成React组件，精准还原UI+动态交互效果
3
React 音频播放器组件 Audio Player
4
React 音频上传组件 Audio Upload
5
如何在React Router中定义404错误页面组件？
6
在 React 中使用高阶组件时，如何避免命名冲突？
7
React音频播放控制组件开发深度解析
8
React 音频预览组件：Audio Preview
9
React 视频播放控制组件 Video Controls
10
React音频进度条组件开发全攻略
1
如何在React.js中使用Shadcn/UI
80
2
react js 处理表单（ form ）的2个例子
59
3
深入理解React.js的五大优点及其对前端开发的影响
222
4
深入理解React.js的两大优点及其对前端开发的影响
77
5
如何学习React.js？
105
6
【React】React原理面试题集锦
186
7
发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
146
8
【React】Hooks面试题集锦
306
9
react保姆级搭建新项目
152
10
使用React、TypeScript和Ant Design构建现代化前端应用
257