<!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. IDC：云效产品能力No.1，领跑中国DevOps市场

    简介: 近日,全球领先的专业市场调查机构国际数据公司(IDC)发布了<IDC MarketScape:中国 DevOps 平台市场厂商评估,2022>报告.此报告中对中国主流 DevOps ...

  2. 一款跑在云上的定制容器专属 OS 来了——LifseaOS | 龙蜥技术

    ​简介:如果可以把运维 API 化,那我们是不是可以把 OS 也作为一个 K8S 可以管理的资源,让 K8S 像管理容器一样管理OS? ​ 引言 在 2021 年 10 月的云栖大会上,为云原生而生的 ...

  3. 深入浅出FlatBuffers原理

    简介: FlatBuffers 是一个开源的.跨平台的.高效的.提供了多种语言接口的序列化工具库.实现了与 Protocal Buffers 类似的序列化格式.主要由 Wouter van Oortm ...

  4. CDP 平台简介

    ​简介: EDC 建立在 Cloudera Data Platform(CDP) 之上,该产品结合了 Cloudera Enterprise Data Hub 和 Hortonworks Data P ...

  5. 如何在M1 MACBOOK上准备好ORB-SLAM2的环境

    1. 环境 M1 Macbook Air Parallels Desktop 17 关于虚拟机,在之前尝试了UTM,但是性能欠佳,卡顿情况比较多,而且未能解决联网问题,最终只能含泪放弃 Paralle ...

  6. 适合IT团队的在线文档私人分享工具——showdoc部署

    转载文章: https://www.lixian.fun/3617.html

  7. Golang 爬虫02

    验证邮箱 目标站点: https://movie.douban.com/top250

  8. 零知识证明： Tornado Cash 项目学习

    前言 最近在了解零知识证明方面的内容,这方面的内容确实不好入门也不好掌握,在了解了一些基础的概念以后,决定选择一个应用了零知识证明的项目来进行进一步的学习.最终选择了 Tornado Cash 这个项 ...

  9. 支持4k的远程桌面软件有哪些

    在当今的数字时代,在全球向灵活工作安排和分布式团队转变的推动下,对远程工作解决方案的需求猛增.远程桌面软件已成为寻求让员工能够在任何地方工作的企业的重要工具.在用户在此类软件中寻求的众多功能中,对 4 ...

  10. JDK源码阅读-------自学笔记(二十)(java.util.List初探)

    List简介 List是有序.可重复的容器. 有序:List中每个元素都有索引标记.可以根据元素的索引标记(在List中的位置)访问元素,从而精确控制这些元素. 可重复:List允许加入重复的元素.更 ...