<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>hell world</title>

  <style>

    .red {

      color: red

    }

  </style>

</head>

<body>

  <!-- 用于内容显示容器 挂载点 -->

  <div id="app"></div>

  <!-- react核心类库 -->

  <script src="./js/react.development.js"></script>

  <!-- dom操作 -->

  <script src="./js/react-dom.development.js"></script>

  <!-- 解析jsx语法的兼容库 -->

  <script src="./js/babel.min.js"></script>

  <script type="text/babel">

    const app = document.querySelector('#app')

    // 一维数组

    const users = ['张三', '李四', '王五', '东炎']

    // jsx => js扩展

    // 如果是单行则不需要小括号，多行需要使用小括号括起来

    const vnode = (<div>

      {

        // 一组数组可以直接写变量，就会自动循环解析

      }

      {users}

      <hr />

      <ul>

        {

          // 在jsx中循环输出可以使用 map 必须要有return

          /* users.map((item,index)=>{

            return <li>{item}</li>

          }) */

          //users.map((item,index)=><li>{item}</li>)

          /* users.map((item, index) => {

            return (<li>

              <h3>你好世界</h3>

              {item}

            </li>)

          }) */

          // 最终写法 key唯一 diff算法所用

          users.map((item, index) => (

            <li key={index}>

              <h3>你好世界</h3>

              {item}

            </li>

          )) 

        }

      </ul>

    </div>)

    // 把虚拟dom转为真实的dom并挂载到页面中

    ReactDOM.render(vnode, app)

  </script>

</body>

</html>

react 数组列表的更多相关文章

  1. React Native 列表的总结

    React Native 列表的总结 FlatList和SectionList都是React Native中高性能的列表组件.这些新的列表组件在性能方面都有了极大的提升, 其中最主要的一个是无论列表有 ...

  2. ArrayList数组列表

    ArrayList数组列表 Collection接口和List接口的区别 List接口扩充了Collection接口,添加了索引相关的方法. code example Object get(int i ...

  3. 泛型数组列表 ArrayList

    为什么使用泛型数组列表而不使用普通数组? 1.普通数组经常会发生容量太大以致浪费的情况 2.普通数组无法动态更改数组 基本概念: 1.采用[类型参数]的[类]---->[泛型类] 2.[泛型类型 ...

  4. 变长数组列表ArrayList

    简介:此数据结构定义为一个ArrayList结构体类型,维护了一个内部堆数组.通过realloc函数实现了数组容量自动扩充,每次扩充到原来的2倍. 通过函数指针实现了使用者根据自己的需求按条件按查找目 ...

  5. js数组(列表)的基本操作

    本文主要介绍JS对数组(列表)的基本操作.习惯了用数据库的操作顺序来说明:增.删.改.查:合并,裁剪,排序,格式化. 一.数组元素的添加(增加) 增加数组元素有三种方法:unshift()  push ...

  6. c#简单实现二维数组和二维数组列表List&lt;&gt;的转置

    刚看到网上一篇文章里用sql实现了行列转置.sql server 2005/2008只用一个pivot函数就可以实现sql server 2000很多行的复杂实现.提到转置,立刻想起还在求学阶段曾经做 ...

  7. Java数组列表反转

    在Java中,如何反转数组列表中的元素? 以下示例使用Collections.reverse(ArrayList)方法反转数组列表中的元素. package com.yiibai; public cl ...

  8. java 泛型数组列表

    如下代码: package com.company; import java.lang.reflect.Array; import java.util.ArrayList; public class ...

  9. 前端 javascript 数据类型 数组 列表

    javascript数组相当于python的列表 创建列表 a = [1,2,3,4]; [1, 2, 3, 4] 获取列表长度 a = [1,2,3,4]; [1, 2, 3, 4] a.lengt ...

  10. python数组列表、字典、拷贝、字符串

    python中字符串方法 name = "I teased at life as if it were a foolish game" print(name.capitalize( ...

随机推荐

  1. oracle表名、字段名等对象的命名长度限制(报错：ORA-00972: 标识符过长)

    oracle表名.字段名等对象的命名长度限制(报错:ORA-00972: 标识符过长) 简单来说,出现了ORA-00972: 标识符过长的错误 找来找去发现是自己的中间表名太长导致的 Oracle数据 ...

  2. 一遇到复杂分析查询就卡顿？MySQL分析实例了解一下

    随着企业数据爆发式增长,MySQL分析查询卡顿问题越来越多,用户时效性不能保证,精细化运营诉求不能满足.如何能无缝对接业务库,实现毫秒级针对万亿级数据进行即时的多维分析透视和业务探索,MySQL分析实 ...

  3. 阿里云荣获可信云容器安全能力先进级认证， ACK/ACR为企业级安全护航

    阿里云关注企业级用户的Kubernetes生产落地痛点,结合企业生产环境的大量实践,全面帮助企业真正落地云原生架构.安全侧问题,是众多大中型或金融领域企业的核心关注点. 端到端云原生安全架构 早在20 ...

  4. EDAS微服务应用同城容灾最佳实践

    简介: 大多数业务应用只要做到同城双活,就可以避免掉大多数数据中心不可用故障.本实践就是帮助大家高效.低成本地实现自己的业务应用具备同城双活容灾能力. 前言 上云目前已经是绝大数企业首选的IT基础设施 ...

  5. Spring Boot Serverless 实战系列“架构篇” | 光速入门函数计算

    ​简介:如何以 Serverless 的方式运行 Spring Boot 应用? ​ 作者:西流(阿里云函数计算专家) Spring Boot 是基于 Java Spring 框架的套件,它预装了 S ...

  6. Quick BI产品核心功能大图（四）：Quick引擎加速--十亿数据亚秒级分析

    ​简介: 随着数字化进程的深入,数据应用的价值被越来越多的企业所重视.基于数据进行决策分析是应用价值体现的重要场景,不同行业和体量的公司广泛依赖BI产品制作报表.仪表板和数据门户,以此进行决策分析. ...

  7. 基于 MaxCompute + Hologres 的人群圈选和数据服务实践

    ​简介: 本文主要介绍如何通过 MaxCompute 进行海量人群的标签加工,通过 Hologres 进行分析建模,从而支持大规模人群复杂圈选场景下的交互式体验,以及基于API的数据服务最佳实践. 本 ...

  8. 用python编写向通信产品发送AT指令的程序实例

    一.安装pyserial包pip install pyserial 二.实例代码 # -*- coding: utf-8 -*- import time import hashlib from ser ...

  9. [PHP] Laravel 联查中对不同表字段关系加条件的方式

    如果条件需要加在 where 条件里,使用 whereColumn,如下示例: whereColumn('A.b_id', '=', 'B.id'); 如果需要加载 join 的 on 之后作为多个条 ...

  10. 2024 年最值得推荐的 7 个 Vue3 组件库

    你好,我是 Kagol. Vue 是一款易学易用,性能出色,适用场景丰富的渐进式 JavaScript 框架,深受广大开发者的喜爱,Vue3 更是推出了 Composition API,让逻辑复用更友 ...