一、props代表外部数据

外部数据一般都来自父组件的state。现在有一个父组件：

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state={name:"shuaige"}
    }
    onClick=()=>console.log(this.state.name);
    render(){
        return <Son name={this.state.name}
                    onClick={this.onClick}>hi</Son>
    }
}

Parent父组件里的state里的数据甚至是定义的onClick函数都传给了Son。以在Son标签上添加属性来传进去。
外部数据会被整合成一个对象。在上述栗子中，这个对象为：

{name:"shuaige",onClick:....,children:"hi"}

其中children为写在标签里内容，如果内容多了，就以数组的形式表示。

对于子组件Son：

class Son extends React.Component{
    //props指向那个保存数据的对象的地址
    constructor(props){
        super(props)
    }
    render(){
        return (
            <div onClick={this.props.onClick}>
                {this.props.name}
                <div>
                    {this.props.children}
                </div>
            </div>
        )
    }
}

constructor(props){super(props)}可以省略不写。
这样初始化后，props就在this上，可以直接用父元素传过来的数据了,直接this.props.xxx
props尽量不要修改，只能读取。因为这是从外部传来的数据，要改数据也是你改自己内部的数据

二、state代表内部数据

初始化内部数据，在constructor里面写：

class Son extends React.Component{
    constructor(props){
        super(props);
        this.state={
                user:{name:"shuaige",age:18}
        }
    }
    render(){...}
}

要用内部数据state，直接this.state.xxx.yyy
设置内部数据，setState(newState,fn),其中newState传一个新state对象，或者写一个return新对象的函数，后面的fn是指设置完数据后，写入成功了在调用的一个回调函数，具体用法之前已经学过。