react基础-列表渲染-条件渲染-refs-受控元素-非受控元素

1 列表渲染

//对象 数组 string 数字
this.props|state.属性名.map(function(val,index){
return jsx
})

	 import {
   render} from "react-dom";
	 import {
   Component} from 'react'
	
	 class Demo extends Component{
   
	
	     state = {
   
	         str: "bmw",
	         num: 10,
	         arr: ['aa', 'bb', 'cc'],
	         arr2: [
	             {
   id:1,name:'alex'},
	             {
   id:2,name:'alex2'},
	         ],
	         arr3: [
	             {
   id:1,name:'alex'},
	             {
   id:2,name:'alex2',child:[
	                     {
   id:1,name:'ppp'},
	                     {
   id:2,name:'ppp2'},
	                 ]},
	         ],
	         obj: {
   a: 1, b: 2},
	     }
	
	     render(){
   
	     	// ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构 (Destructuring)。
	         let {
   str,num,arr,arr2,arr3,obj} =this.state
	         console.log(this.state.obj)
	         return(
	
	             <div>
	                 <p>{
   str}</p>
	                 <p>{
   num}</p>
	                 <h3>列表渲染</h3>
	                 <div>数组: {
   arr}</div>
	                 <p>{
   arr2}</p>
	                 <p>{
   arr3}</p>
	                 <p>{
   obj.a}</p>
	
	                 <ul>
	                 	//es6新增map() ：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
	                     {
   arr.map((value, index) => <li key={
   index}>{
   value}</li>)}
	                 </ul>
	                 <ul>
	                     {
   arr2.map(value => <li key={
   value.id}>{
   value.name}