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。通常用於相似於界面主題，用戶信息等不太更改的全局變量，能夠提供一個高階組件來更好的實現。

沒有嵌套關係組件的通訊

同級組件的通訊，通常都是來源於同一父組件。 若沒有父組件，能夠經過影響全局的一些機制去考慮，好比說自定義事件，經過事件去傳遞。

---

小結

通常狀況下，組件間的通訊都要儘量的保持簡潔，若是出現多級傳遞或者跨級傳遞時，首先要從新審視下是否有更合理的方式定義組件結構。