<!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. SQL SERVER 数据库性能优化与管理从零基础到走两步系列（一）——性能计数器

    前辈大佬资料: 使用性能监视器找出SQLServer硬件瓶颈 在网络上苦苦流浪了近十几个小时,从百度到谷歌,从CSDN到博客园,从知乎到微信读书,看了无数本滥竽充数的书,读了无数篇夹生的技术文章,快下 ...

  2. 打CS2的时候提示 error:unrec stream cmd 2090 82a

    打CS2的时候提示 error:unrec stream cmd 2090 82a 打着打着就卡住,然后提示error:unrec stream cmd 2090 82a 找了一圈,进bios把内存条 ...

  3. Dapr Outbox 执行流程

    Dapr Outbox 是1.12中的功能. 本文只介绍Dapr Outbox 执行流程,Dapr Outbox基本用法请阅读官方文档 .本文中appID=order-processor,topic= ...

  4. 力扣1070(MySQL)-产品销售分析Ⅲ（中等）

    题目: 销售表 Sales: 产品表 Product: 编写一个 SQL 查询,选出每个销售产品 第一年 销售的 产品 id.年份.数量 和 价格. 结果表中的条目可以按 任意顺序 排列. 查询结果格 ...

  5. 力扣341(java)-扁平化嵌套列表迭代器（中等）

    题目: 给你一个嵌套的整数列表 nestedList .每个元素要么是一个整数,要么是一个列表:该列表的元素也可能是整数或者是其他列表.请你实现一个迭代器将其扁平化,使之能够遍历这个列表中的所有整数. ...

  6. 如果千百年前有视觉AI算法，世界将会是什么样的光景呢？

    视觉AI算法在近些年取得了一定的突破,被应用在了越来越多的地方,我相信距离真正的AI普及这个大目标也越来越近了.我时常在想假如古代也有视觉AI算法,那是不是很多故事的结局都将被改写?<伯乐相马& ...

  7. 涨姿势 | 一文读懂备受大厂青睐的ClickHouse高性能列存核心原理

    简介: 本文尝试解读ClickHouse存储层的设计与实现,剖析它的性能奥妙 作者:和君 引言 ClickHouse是近年来备受关注的开源列式数据库,主要用于数据分析(OLAP)领域.目前国内各个大厂 ...

  8. [Cryptocurrency] rDAI 与 DAI 的区别, 如何质押 rDAI 获取利息

    以下合约操作需要在安装 MetaMask ( 以太坊的浏览器钱包 ) 的情况下进行. rDAI 通过和 DAI  1 : 1 互换得到,在 rDAI 提供的 dapp 上面操作 https://app ...

  9. Oracle、达梦：生成32位字符串（ID）

    15.生成32位字符串 达梦.oracle 函数:sys_guid().newid() 转小写LOWER(char) select rawtohex(sys_guid()); -- 推荐使用newid ...

  10. python性能分析line_profiler

    在编程世界中,效率是王道.对于Python开发者来说,line_profiler 是一把锐利的剑,能够深入代码的每一行,找出性能瓶颈.今天,就让我们一起深入探索 line_profiler,学习如何用 ...