React 组件间通信

在经历了许多的html+css+js的传统网页制作之后，最近开始上手react了。学了一点语法之后就开始了react的项目，
然而事情不总是一帆风顺的。刚上手的时候，项目的进度就是一团糟。各种迷之bug纷至沓来，在这里真的要提醒诸位，在写react es6语法的时候，html结构中的dom事件千万要注意大小写，比如html结构中的onclick事件，这个在html页面中是这样写的，然而在es6里面就只能用onClick了，否则会影响组件的生成。
好了，话不多说，我们进入正题。
react相邻组件间是怎么通信的？大家应该都知道react在生成组件以后只有setState方法能引起组件重新渲染，然而在相邻组件之间，同级组件是不可能影响到另一个组件的setState方法的。也就是说，如果我要实现qq登录（安卓端）的效果（修改账号同时修改头像），就目前来看是不可能的。
为此，react给我们提供了一个方法：状态提升
原理很简单，就是将同级的需要相互通信的组件写到一个父组件中，然后给两个子组件分别传递不同的参数，包括改变State的函数和State中改变的属性。
换句话说，就是重新渲染父组件以达到我们想要的效果。

//子组件1//头像url默认为user.png,只要输入了uid，则获取当前用户的头像url，并更新这个组件export class UserAvatar extends Component{    constructor(props){        super(props);    }    componentDidMount(){        console.log(this.props.imageurl);        console.log("avatar init")    }     //下面接收父组件传递过来的State参数     render() {        return (            <div className="avatar-wrapper">              <img src={this.props.imageurl} alt="头像" />            </div>        )    }}//子组件2export class Login extends Component{    constructor(props){        super(props);    }    componentDidMount(){        console.log(this.props.changeAva);        console.log("login init");    }//下面接收改变状态的函数方法    render(){        return(            <div className="login-wrapper">                <div className="text-input-wrapper">                   <img src={account_icon} alt="account"/>                    <input type="text" className="text-input" maxlength="10" onBlur={this.props.changeAva.bind(this)}/>                </div>                <div className="text-input-wrapper">                    <img src={password_icon} alt="password"/>                    <input type="text" className="text-input" maxlength="10"/>                </div>                <div className="button-wrapper">                    <input type="button" value="登录" onClick={this.onLogin.bind(this)}/>                </div>                <div className="forget-password-wrapper"><a href="#!">忘记密码?</a></div>            </div>        )    }     onLogin(){        alert("申请授权中，请耐心等待");    }}//父组件export class LoginAvatar extends Component{    constructor(){        super();        this.state={            imageUrl:"../../resource/images/avatar/user.png"        };    }//改变状态的方法在父组件中定义    changeAvatar(){        this.setState({            imageUrl:"../../resource/images/avatar/1262283870/avatar.jpg"        })    }    render(){        return(            <div className="main-login-wrapper">                 <UserAvatar imageurl={this.state.imageUrl}/>                 <Login  changeAva={this.changeAvatar.bind(this)}/>            </div>        )    }}

简单来说，就是父组件调用子组件时，给子组件传递相应的参数，一个用于显示，一个用户重新渲染。这就是所谓的状态提升，也因此我们能实现组件间的通信。

个人理解，如若有误，还请不吝赐教。