react状态初体验和循环渲染

import React, { Component } from 'react'
export default class app extends Component {

    state = {
        "mytext": "收藏",
        myShow:true
    }
  render() {
    return (
        <div>
            
            <h1>欢迎来到react开发</h1>
            <button onClick={() => {
                // this.setState({ mytext: "取消收藏" })
                this.setState({ myShow: !this.state.myShow })

                if (this.state.myShow) {
                    console.log("收藏的逻辑")
                } else {
                    console.log("取消收藏的逻辑")
                }

            }}>
                {/* {this.state.mytext} */}
                {this.state.myShow ? '收藏' : "取消收藏"}
            </button>
        

      </div>
    )
  }
}
/**
 *  状态(state)
 *  状态是组件内部特有的数据载体
 */

import React, { Component } from 'react'
export default class app extends Component {
    constructor() {
        super()
        this.state = {
            mytext: "收藏",
            myShow: false,
            name: 'react',
        }
   }
   
  render() {
    return (
        <div>
            
            <h1>欢迎来到{this.state.name} 开发</h1>
            <button onClick={() =>{
                this.setState({
                    myShow: !this.state.myShow,
                    name:"xiaoming"
                })
            }}>
                {this.state.myShow ? '取消收藏' : "收藏"}
            </button>
        

      </div>
    )
  }
}
/**
 *  状态(state)
 *  状态是组件内部特有的数据载体
 */

import React, { Component } from 'react'

export default class app extends Component {
    state = {
      list:[{
          id: "1",
          key:"1111"
      },{
        id: "2",
        key:"2222"
    },{
        id: "3",
        key:"3333"
    }]
  };
    render() {
      var newList= this.state.list.map((item,index) => <li key={index}>{item.key}</li> )
    return (
        <div>
            <ul>
                {
                    // this.state.list.map(item =>
                    //     <li key={item}>{item}</li>
                    // )
                    newList
                }
            </ul>
      </div>
    )
  }
}

/**
 * 原生js- map
 * 不涉及表格删除，key设置索引可以
 */