React入门系列（五）props和state

props

因为React是组件化的，因此页面上的元素会被拆分成一些可复用的组件。一个组件就是一个单独的类或者函数，需要通过props来接收从组件外部传过来的数据，因为React是单向数据流，所有props就是接收来自父组件的数据,props是只读的，不可改变的，用来定义外部接口

```父组件
import Item from "./Item"
class ItemList extends React.component{

	render(){
		return({
			<ul>
				{this.state.list.map((item, index) => {
						<Item 
                            key={index+item}
                            itemData={item}
                         />
					}
				)}
			<ul>
		})
	}
}
export defult ItemList 
	 

```子组件
import React, { Component } from 'react';

class Item extends Component {
   
    constructor(props){
        super(props)
    }
    
    render() { 
        let {itemData} = this.props;
        return (  
            <li>{itemData}</li>
        );
    }
}

export default Item 

很简单的一个列表，每一个列表中的Item是一个单独的组件，在子组件中的render函数中
通过props来接收父组件传过来的数据进行渲染

state

react是通过改表state的值来控制界面变化，界面会根据state的值变化而重新渲染，state是记录组件的内部状态,有state叫有状态组件，无state叫无状态组件

注意setState这个方法是异步的，渲染结束后会调用callback方法进行回调

class ItemList extends React.component{
	constructor(){
    	super();
	    this.state = {
	      name:'小明',
	    }
	    this.changeName=this.changeName.bind(this)
  	}
  	
  	changeName(){
  		this.setState({
			name:'小强'
		})
  	}
  	
	render(){
		return(
			<div onClick={this.changeName}>
				{this.state.name}
			<div>
		)
	}
}
export defult ItemList