#yyds干货盘点# 歌谣学前端之React中渲染列表

简介: #yyds干货盘点# 歌谣学前端之React中渲染列表

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

image.png

代码小结

/*
        <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>;

代码案例

<!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>
相关文章
|
30天前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
1月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
4天前
|
缓存 前端开发 JavaScript
前端性能优化:从加载到渲染的全方位探索
【6月更文挑战第11天】本文探讨了前端性能优化,重点关注加载速度和渲染效率。压缩与优化资源文件、利用CDN、异步加载和懒加载可提升加载速度。减少DOM操作、合理利用CSS和JavaScript、优化JavaScript执行效率以及利用浏览器缓存能提高渲染效率。通过综合运用这些策略,可提升用户体验。
|
9天前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
9天前
|
前端开发
前端react入门day02-React中的事件绑定与组件
前端react入门day02-React中的事件绑定与组件
|
27天前
|
存储 缓存 监控
深入理解前端性能优化:从网络到渲染
网络优化包括减少HTTP请求、使用HTTP/2、开启GZIP压缩和缓存策略。资源加载优化涉及懒加载、预加载和预读取。渲染优化建议使用Critical CSS、减少CSS和JavaScript阻塞以及避免强制同步布局。Service Worker实现离线存储,性能监控使用Lighthouse等工具。动态导入和代码拆分减少初始加载时间,响应式图片适应不同设备。Web Workers处理耗时任务,避免内存泄漏。
45 3
|
29天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
30天前
|
前端开发 JavaScript 开发者
深入理解前端性能优化:从加载到渲染的全流程分析
前端性能优化是Web开发中的关键一环。本文将从加载资源、解析HTML、执行JavaScript、样式计算、布局和渲染等多个方面深入探讨前端性能优化的全流程,为开发者提供全面的技术指南和实用建议。
|
1月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
1月前
|
存储 缓存 监控
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
【4月更文挑战第30天】本文探讨了Flutter中优化列表滚动性能的策略。建议使用`ListView.builder`以节省内存,避免一次性渲染所有列表项。为防止列表项重建,可使用`UniqueKey`或`ObjectKey`。缓存已渲染项、减少不必要的重绘和异步加载大数据集也是关键。此外,选择轻量级组件,如`StatelessWidget`,并利用Flutter DevTools监控性能以识别和解决瓶颈。持续测试和调整以提升用户体验。
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化