react 中列表的应用

	import { Component } from "react";
	
	export default class ForList extends Component {
	    constructor (){
	        super()
	        this.state = {
	            list:[]
	        }
	    }
	
	    componentDidMount(){
	        this.setState( {
	            //获取数据
	            list:[
	                {
	                    id:1,
	                    name:'手机'
	                },
	                {
	                    id:2,
	                    name:'电脑'
	                }
	            ]
	        })
	    }
	
	
	   //当props state 改变的时候，触不触发react更新
	   //返回值  false:不更新 , true:更新
	   shouldComponentUpdate(preProp,preState){
	    console.log('shouldComponentUpdate 执行了');
	      return true
	   }
	
	   getSnapshotBeforeUpdate(){
	    console.log('getSnapshotBeforeUpdate 执行了');
	   }
	
	    render (){
	        
	        //循环数组
	        let newList = this.state.list.map( (item,index)=> {
	            return <div key={item.id}>
	                <p>id:{item.id}</p>
	                <p>name: {item.name}</p>
	            </div>
	        }
	        // map 函数 { return } 可以省略
	        )
	        
	        return (
	            <div>
	                <p>列表渲染子组件</p>
	                <div>
	                    {/* 第一种写法 */}
	                    {newList}
	
	                    {/* 第2种写法  上面的循环就可以省略不写*/}
	                    {
	                       this.state.list.map( (item,index)=>
	                        <div key={item.id}>
	                            <p>id:{item.id}</p>
	                            <p>name: {item.name}</p>
	                        </div>
	                    ) 
	                    }
	                </div>
	            </div>
	        )
	    }
	}