React组件间的通讯

Posted 2021-01-04 onebox

　　组件化开发应该是React核心功能之一，组件之间的通讯也是我们做React开发必要掌握的技能。接下来我们将从组件之间的关系来分解组件间如何传递数据。

1.父组件向子组件传递数据

　　通讯是单向的，数据必须是由一方传到另一方。在 React 中，父组件可以向子组件通过传 props 的方式，向子组件进行通讯。

class Parent extends Component{
  state = {
    msg: ‘start‘
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        msg: ‘end‘
      });
    }, 1000);
  }

  render() {
    return <Child_1 msg={this.state.msg} />;
  }
}

class Child_1 extends Component{
  render() {
    return <p>{this.props.msg}</p>
  }
}

　　如果父组件与子组件之间不止一个层级，如 Parent 与 Child_1_1 这样的关系（即Parent>Child_1>Child_1_1），可通过 ... 运算符（Object 剩余和展开属性），将父组件的信息，以更简洁的方式传递给更深层级的子组件。通过这种方式，不用考虑性能的问题，通过 babel 转义后的 ... 运算符 性能和原生的一致，且上级组件 props 与 state 的改变，会导致组件本身及其子组件的生命周期改变。

// 向 Child_1_1 传递 Parent 组件的信息
class Child_1 extends Component{
  render() {
    return <div>
      <p>{this.props.msg}</p>
      <Child_1_1 {...this.props}/>
    </div>
  }
}

class Child_1_1 extends Component{
  render() {
    return <p>{this.props.msg}</p>
  }
}

2.子组件向父组件传递数据

　　在上一个例子中，父组件可以通过传递 props 的方式，自顶而下向子组件进行通讯。而子组件向父组件传递数据，同样也需要父组件向子组件传递 props 进行通讯，只是父组件传递的是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。

// 父组件 Parent
class Parent extends Component{
  state = {
    msg: ‘start‘
  };
  
  transferMsg(msg) {
    this.setState({
      msg
    });
  }

  render() {
    return <div>
        <p>child msg: {this.state.msg}</p>
        <Child_1 transferMsg = {msg => this.transferMsg(msg)} />
      </div>;
  }
}
// 子组件 Child_1
class Child_1 extends Component{
  componentDidMount() {
    setTimeout(() => {
      this.props.transferMsg(‘end‘)
    }, 1000);
  }

  render() {
    return <div>
      <p>child_1 component</p>
    </div>
  }
}

　　在上面的例子中，我们使用了 箭头函数，将父组件的 transferMsg 函数通过 props 传递给子组件，得益于箭头函数，保证子组件在调用 transferMsg 函数时，其内部 this 仍指向父组件。

　　当然，对于层级比较深的子组件与父组件之间的通讯，仍可使用 ... 运算符，将父组件的调用函数传递给子组件，具体方法和上面的例子类似。