<!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. JavaScript中的事件模型如何理解?

    一.事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件.鼠标事件.自定义事件等 由于DOM是一个树结构,如果在 ...

  2. 《c#高级编程》第5章C#5.0中的更改（十）——异步编程

    C#异步编程是一种在单线程上实现并发执行的技术,它通过使用异步方法.任务等高级概念,使得应用程序能够更好地响应用户操作.处理大量数据和操作外部资源.C#异步编程的核心概念包括: 异步方法:使用 asy ...

  3. ORA-29278: SMTP transient error: 421 Service not available

    ORA-29278: SMTP transient error: 421 Service not available 一般来说,很可能是邮件服务器连接不上 p_conn := utl_smtp.ope ...

  4. 力扣319(java)-灯泡开关（中等）

    题目: 初始时有 n 个灯泡处于关闭状态.第一轮,你将会打开所有灯泡.接下来的第二轮,你将会每两个灯泡关闭第二个. 第三轮,你每三个灯泡就切换第三个灯泡的开关(即,打开变关闭,关闭变打开).第 i 轮 ...

  5. Java应用结构规范

    ​简介:在Java程序开发中,命名和应用分层无疑是广大后端同胞的两大"痛点",本文提供一种基于领域模型的轻量级应用分层结构设计,供大家参考.下面按分层结构.分层明细.调用关系.各层 ...

  6. 深入分析 Flutter 渲染性能

    简介: Flutter 有很多优点,特别是对于开发者来说,跨平台多端支持,丰富的 UI 组件库和交互效果,声明式 UI,React 的更新方式,Hot-reload 提高开发效率等等.虽然它在渲染性能 ...

  7. Vineyard 加入 CNCF Sandbox，将继续瞄准云原生大数据分析领域

    简介: Vineyard 是一个专为云原生环境下大数据分析场景中端到端工作流提供内存数据共享的分布式引擎,我们很高兴宣布 Vineyard 在 2021 年 4 月 27 日被云原生基金会(CNCF) ...

  8. [FE] nvm-windows: Microsoft/NPM/Google 推荐 Windows 的 Node.js 版本管理器, posix 的 nvm-sh/nvm

    1. 到 github 下载 nvm-setup.zip 并安装. Releases · coreybutler/nvm-windows (github.com) 2. 安装一个版本的 nodejs. ...

  9. vue+vant+js实现购物车原理小demo（高级版选择与反选）

    新增反选功能.上图(这个系列系利用前端框架的原创): main.js: Vue.use(Stepper); Vue.use(Checkbox); Vue.use(CheckboxGroup); .vu ...

  10. 一个可一键生成短视频的AI大模型，亲测可用

    大家好,我是 Java陈序员. 自从 OpenAI 发布 Sora 文本生成视频模型后,文本生成视频的 AI 技术引起了无数圈内圈外人士的关注和实验. 今天,给大家介绍一个大模型,可一键生成短视频. ...