学习React基本渲染数据操作（-）

import React, { Component, Fragment } from "react";
//采用类的写法，现在在版本16.8以后出现Hooks以后就几乎不用类的写法
export default class App extends Component{
	state = {
		arr:["23","地方"]
	}
	render(){
		return(
			<>
				<ul>
					return(
						this.state.arr.map((item,index)=>{
							return(
								//说明 这个Fragment这个是一个根元素，
								// 但是和<>这个根元素还是使用场景用所不同，比如下面这个
								//如果用和这个<>包括报语法错误
								<Fragment key= {index} >
								<li>{item}</li>
								<span>一切安好</span>
								<Fragment />
							)
						})
					)
				</ul>
			</>
		)
	}
}
//采用函数式写法 Hooks
import React ,{useState,Fragment} from "react"
export default function App(){
	let [sum,setSum] = useState(["小白","小花","小黑"]);
		return(
			<>
				<ul>
				 	sum.map((item,index)=>{
				 		return(
				 			< Fragment key={index}>
				 			 	<li>{item}</li>
				 			 	<span>小包</span>
				 			<Fragment/>
				 		)
				 	})
				 )
			</ul>
		</>
	)
}
//文件index.js
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(
	<App/>,
	document.getElementById("root")
)