react组件通信

说到组件，那就不能不说组件通信。个人觉得相对于vue，react的通信比较容易理解。

父组件向子组件通信

react是单向数据流，数据主要从父节点传递到子节点（通过props）。这种传递方式也是比较简单：

// 子组件
class Son extends React.Component{
          render(){
              return <div>{this.props.title}</div>
          }
      }

// 父组件
class Parent extends React.Component{
    render(){
      return <Son title="我是父组件传给子组件的值"/>
    }
}

ReactDOM.render(<Parent/>,app)

子组件向父组件通信

因为react是单向数据流，数据只能有父组件传递到子组件，所以要想从子组件更新父组件，需要一个取巧的方法，那就是利用回调函数，简单概述就是：父组件通过props传递一个回调函数到子组件中，这个回调函数可以更新父组件，子组件就是通过触发这个回调函数，从而使父组件得到更新

// 子组件
    class Son extends React.Component{
        render(){
            return <button onClick={this.props.handleChange}>点我可以改变父组件的状态值</button>
        }
    }
    
   // 父组件
    class Parent extends React.Component{
        constructor(){
            super()
            this.state={
                val:0
            }
        }

        change(){
          let newVal = this.state.val + 1
          this.setState({
              val:newVal
          })
        }
        render(){
            return <div>
                     <Son handleChange={this.change.bind(this)}/>
                     <p>{this.state.val}</p>
                   </div>
            
        }
    }

这次，父组件通过props传一个回调函数给子组件，子组件通过触发这个回调函数来更新父组件的状态。