react把真是的DOM tree，轉化成virtual DOM，每次資料更新後，重新計算virtual DOM並與上一次的作對比，然後對發生改變的部分進行批量更新。從此效能得到提升。

正文：通訊

父——>子 使用props。

子元件中（我的示例中，父元件1個，子元件3個）：

class Input extends React.Component{ //input子元件，class型別的元件
  constructor(props) {
    super(props);
    this.onChangeFunc = this.onChangeFunc.bind(this
 
)
    this.onBlur = this.onBlur.bind(this)
  }
  render (){
    return <input className={this.props.color} 
                  value = {this.props.value} 
                  onChange={this.onChangeFunc}
                  onBlur = {this.onBlur}
            />
  }
  onChangeFunc(e){
    this.props.inputValueFunc(e.target.value)  //這裡使用了從父元件傳進來的方法
 

  }
  onBlur(e){
    var value = parseInt(e.target.value,10);
    if (value) {
        alert('你輸入了數字')
    } else {
      alert('你輸入了字串')
    }
  }
}

class Button extends React.Component{
  render(){
    return <button className={this.props.color}>{this.props.name}</button>
  }
}

function
 
 Hello(props){  //props是從父元件中傳進來的。
  return <div className={props.color}>{props.children}</div>
}

上面示例程式碼中，有3個子元件，其中前兩個是class類元件，props是從父元件中傳進來的物件。

父元件中：

class App extends Component {
  constructor(props){
    super(props)
    this.state = {value:'please input something'}
    this.inputValueFunc = this.inputValueFunc.bind(this)
  }
  inputValueFunc(value){
    this.setState({
      value: value
    })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>

        <Hello color='blue'>
        <h3>啦啦啦</h3>
        <p>Thank you for visiting !</p>
        </Hello>

        <Input inputValueFunc={ this.inputValueFunc } value={this.state.value} color='blue'/> //傳入的props可以有方法。

        <Button color='blue' name='submit' value = {this.state.value}></Button> // 在引入子元件時候，傳入props，就是上面的屬性。
      </div>
    );
  }
}

子——>父

react中，子不能直接向父通訊，解決辦法是：

直接把要傳的資料儲存在父元件的state中，例如本例子中APP元件的state，然後在父元件中寫方法，用來改變自己的state。把方法inputValueFunc傳給子元件，子元件呼叫該方法，並把資料作為引數傳給inputValueFunc。

子——>子

尋找最近的父元件，通過父元件通訊。或者使用context，但是官方並不推薦，有可能移除（感覺不是親生的啊，官方文件各種理由不建議使用。。。）。因此，對於大的專案，還是使用狀態管理工具吧。