React消息传递

React消息传递
在React中，数据流动是单向的(单向数据流)，父组件通过props将数据传递到子组件，子组件根据父组件传递来的属性和组件内部状态来确定如何渲染。因为单向数据流的特性，父组件向子组件传递数据是很容易的，即通过props传递数据，且子组件不能修改自己的props；父组件向孙子组件或者后代组件传递数据同样可以利用props进行层层传递。但是，开发过程中我们会遇到各种各样的情况，譬如子组件向父组件传递消息、兄弟组件之间传递消息等，下面我们看一下如何进行组件之间的消息传递。

父子组件之间进行消息传递
React是单向数据流的，父组件向子组件传递消息可以通过props进行传递：

class Child extends React.Component {
   
    // 给value设置默认值
    static defaultProps={
        value: '这里是value的默认值'
    }
    // 对value进行类型检查
    static propTypes={
        value: propTypes.string
    }
    render() {
        console.log(this.props.value);  // 123
        return (
            <div>
                {
  this.props.value}
            </div>
        );
    }
}

class Parent extends React.Component {
   
    render() {
        return (
            <Child value="123" />
        );
    }
}

ReactDOM.render(<Parent />, document.getElementById('react-root'));

子组件向父组件传递消息也是通过props，因为在JavaScript中函数是一等公民，函数本身既可以像其他对象一样作为prop被传递到子组件，也可以在子组件中被直接调用。因此，我们可以向子组件传递一个callback，子组件通过调用这个callback来向父组件中传递数据。

class Child extends React.