react项目实战学习笔记-学习2-知识点回顾1

函数组件

import React,{Component} from "react"
 
function App(){
    return <h2>歌谣</h2>
}
 
export default App

类组件

import React,{Component, Fragment} from "react"
 
// function App(){
//     return <h2>歌谣</h2>
// }
class App extends Component{
    state={
        arr:["张三","李四","王五"]
    }
    render(){
        return (
            <>
            <ul>
                <li>
                    {this.state.arr.map((item,index)=>{
                        return(
                            <Fragment key={index}>
                                <li>{item}</li>
                            </Fragment>
                        )
                    })}
                </li>
            </ul>
            </>
        )
    }
}
 
export default App

函数组件

import React,{Fragment, useState} from "react"
 
// function App(){
//     return <h2>歌谣</h2>
// }
function App(){
    const [arr,setArr]=useState(["刘备","关于"])
    return (
        <ul>
            {arr.map((item,index)=>{
                return(
                    <Fragment key={index}>
                        <li>{item}</li>
                    </Fragment>
                   
                )
            })}
        </ul>
    )
}
 
export default App