React学习笔记——组件间通信

适用于刚开始接触react直接上手的同学，建议还是打好JS和ES6基础。

基础

父传子
子传父
兄弟组件传递

进阶（待完成）

不太相关组件之间传递
redux
ref
context
observer pattern
全局变量

基础内容

（1）父传子：可以通过props将父组件数据传给子组件
function Parent(){
return (

<Child name = "child1"/>

)
}
function Child(props){
return <button >{props.name}</button>
}
ReactDOM.render(<Parent />, document.getElementById("root"));

如上所示，

上面这段的props为{name:"child"}如果不太明白props的话可以看下面这段。

、

（2）子传父：可以通过继承父组件的函数来改变父组件的状态。（回调函数,事件）
也需要父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。

有两种传递方式：

方法一：直接调用父组件的方法

方法二： 先调用自身的方法，再调用父组件的方法

class Parent1 extends React.Component{
  constructor(props){
    super(props);
    this.state ={
      msg:'父类消息',
    }
  }
  
  onButtonClick = (msg) => {
    this.setState({msg: '子类信息'})
  }
 
  render(){
     return (
       <div>
          <p> 子传给我的信息:{this.state.msg}</p>
          {/*方法一调用方式*/}
          <Child1 name = "child1" onClick ={this.onButtonClick}/>
          {/*方法二调用方式 */}
           <Child2 name = "child1" onButtonClick ={this.onButtonClick}/>
       </div>
     )    
  }        
}
// 方法一：直接调用父组件的方法
function Child1(props){
  return <button onClick={props.onClick}>{props.name}</button>
}

//方法二：先调用自身的方法，再调用父组件的方法
function Child2(props){
  childClickHandle = (msg) =>{
    this.props.onButtonClick(msg); //这个onButtonClick对应 <Child2 name = "child1" onButtonClick =  //{this.onButtonClick}/>中第一个onButtonClick
  }
  return <button onClick={childClickHandle}>{props.name}</button>
}

ReactDOM.render(<Parent1 />, document.getElementById("root"));

（3）兄弟组件传值（子传给父，父再传给另一个子),一般来说，两个非父子组件想要通信，首先我们可以看看它们是否是兄弟组件，即它们是否在同一个父组件下。如果不是的话，考虑下用一个组件把它们包裹起来从而变成兄弟组件是否合适。这样一来，它们就可以通过父组件作为中间层来实现数据互通了。

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
  }
  setCount = () => {
    this.setState({count: this.state.count + 1})
  }
  render() {
    return (
      <div>
        <SiblingA
          count={this.state.count}
        />
        <SiblingB
          onClick={this.setCount}
        />
      </div>
    );
  }
}

const SiblingA = (props) => {
  return <button>{props.count}</button>
}

const SiblingB = (props) => {
  return <button onClick={props.onClick}>button2</button>
}

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

进阶内容