react组件间通讯

React要作到组件化开发，组件与组件之间相互独立，组件间的通讯就变得尤其重要，几乎全部类型的信息均可以实现传递，例如数字、字符串、对象、方法、或者自定义组件等。
组件间能够概括为四种类型的通讯方式：父组件向子组件通讯，父组件向更深层的孙子组件通讯，子组件向父组件通讯，没有嵌套关系(同级)组件通讯。下面我将详细介绍：

父组件向子组件通讯

react数据流动是单向的，父组件向子组件通讯最为常见。父组件经过props向子组件传递须要的信息。

父组件：

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      nickname: ""
    };
  }

  handleChange = e => {
    this.setState({
      nickname: e.target.value
    });
  };

  render() {
    return (
      <div>
        <div>父组件</div>
        <input type="text" onChange={this.handleChange} />
        <Child nickname={this.state.nickname} />
      </div>
    );
  }
}

---

子组件：

class Child extends Component {
  render() {
    return (
      <div>
        <div>子组件</div>
        <div>昵称：{this.props.nickname}</div>
      </div>
    );
  }
}

子组件向父组件通讯

利用自定义事件，进行回调。

父组件：

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      post: ""
    };
  }
  changeChildCont = cont => {
    this.setState({
      post: cont
    });
  };
  render() {
    return (
      <div>
        <div>父组件</div>
        <div>职位：{this.state.post}</div>
        <Child childCont={this.changeChildCont} />
      </div>
    );
  }
}

---

子组件：

class Child extends Component {
  handleChange = e => {
    this.props.childCont(e.target.value);
  };
  render() {
    return (
      <div>
        <div>子组件</div>
        <input type="text" onChange={this.handleChange} />
      </div>
    );
  }
}

父组件向孙子组件通讯

也能够叫跨级组件通讯，使用context来实现；

最外层组件
将 childContextTypes 和 getChildContext 添加到最外层组件 (作为context的提供者)。

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      name: ""
    };
  }

  getChildContext() {
    return {name: this.state.name};
  }
  onChangeName = e => {
    this.setState({
      name: e.target.value
    });
  };
  render() {
    return (
      <div>
        <div>用户名：<input type="text" onChange={this.onChangeName}/></div>
        <ChildOne childCont={this.changeChildCont} />
      </div>
    );
  }
}

Parent.childContextTypes = {
  name: PropTypes.string
};

---

子组件(无组件间通讯)

class ChildOne extends Component {
  render() {
    return (
      <div>
        <div>
          <div>我是子组件，我不须要任何组件给我传值</div>
          <ChildTwo />
        </div>
      </div>
    );
  }
}

export default ChildOne;

---

孙子组件（引用最外层组件数据）
context提供后，React自动地向下传递信息，而且子树中的任何组件均可以经过定义 contextTypes 去访问它。
若是 contextTypes 没有定义， context是一个空对象。

class ChildTwo extends Component { 
  render() {
    return (
      <div>
        <div>我是孙子组件，我须要拿到最外层组件的值</div>
        <div>用户：{this.context.name}</div>
      </div>
    );
  }
}

ChildTwo.contextTypes = {
  name: PropTypes.string
};

---

context就像一个全局变量，当组件很复杂时，咱们不知道context是从哪里传来的，因此不建议大量使用context。通常用于相似于界面主题，用户信息等不太更改的全局变量，能够提供一个高阶组件来更好的实现。

没有嵌套关系组件的通讯

同级组件的通讯，通常都是来源于同一父组件。 若没有父组件，能够经过影响全局的一些机制去考虑，好比说自定义事件，经过事件去传递。

---

小结

通常状况下，组件间的通讯都要尽量的保持简洁，若是出现多级传递或者跨级传递时，首先要从新审视下是否有更合理的方式定义组件结构。