React（4）语法学习{列表渲染：数组、数组对象、map语法遍历数组、map语法遍历数组对象}

列表渲染

页面处理的数据较为复杂一些，一般格式为数组和数组对象

一、数组

// rcc 类组件快捷代码提示
import React, { Component } from "react";

export default class App extends Component {
  // 使用state存储还是普通类属性存储？
  // state修改后DOM刷新
  // 普通属性 存储 不修改
  skills = ["uni-app", "react", "reactNative", "angular", "ionic"];
  // 把数组元素显示在单独的按钮上
  // 分析:
  // 1、数组元素需要一个一个遍历出来,外层包裹一个button标签
  // 2、把拼接好的标签元素，添加一个数组中,在页面上渲染这个数组
  showBtn() {
    // 1.声明一个空数组
    let arr = [];
    // 2.遍历源数据 拼接标签 并添加到新数组
    // item代表数组元素值 index代表数组的下标
    this.skills.forEach((item, index) => {
      // key 标签唯一值 渲染过程中 判断节点的更新
      let tmp = (
        <button style={
  { marginLeft: "10px" }} key={index}>
          {item}
        </button>
      );
      arr.push(tmp);
    });
    // 3.返回拼接好的数组
    return arr;
  }
  // 练习:将sk