React組件之間的通訊

以前有寫過一些關於react的基礎的Demo。如今說一說組件之間怎麼通訊。

github 上有相應的代碼參考：https://github.com/RealAndMe/react-demo

1. 概念

React主要是用來構建用戶界面的JavaScript庫。它的特色：

• 單向響應數據流
• 組件。代碼能夠複用。
• 高效。React是在虛擬DOM上進行操做而後渲染到真實DOM上的。
• JSX。這是JavaScript的語法擴展。

2. React組件之間的通訊

react 組件之間的交流能夠分紅 4 種：

• 【父組件】向【子組件】傳值
• 【父組件】向【孫組件】傳值
• 【子組件】向【父組件】傳值
• 兄弟組件之間傳值（沒有任何嵌套關係的組件）

3. 數據從父組件到子組件

父組件給子組件傳值，也就是子組件調用父組件。

var Father = React.createClass({
  render: function() {
    return (
      <div>
        <Child01 name={this.props.name} />
        <Child02 site={this.props.site} />
      </div>
    );
  }
});
 
var Child01 = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Child02 = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
 
ReactDOM.render(
  <Father name="父組件給子組件傳參" site=" http://www.baidu.com" />,
  document.getElementById('contain')
);

上述代碼中，父組件是<Father />。有兩個子組件<Child01 /> <Child02 /> 。父組件向子組件傳值，子組件經過調用 this.props 來獲取父組件的值。

查看（demo14）

還有另外一個例子在 github 上的 demo14 中的 index2.html，也是關於數據從父組件傳到子組件的。

4. 數據從父組件到孫組件

//父組件
var Father = React.createClass({
    getInitialState: function(){
        return {
            msg: "start"
        }
    },
    componentDidMount: function(){
        var t = this;
        setTimeout(function(){
            t.setState({
                msg: "end"
            });
        },1000);
    },
    render: function() {
        return (
          <div>
            <Child msg={this.state.msg}/>
          </div>
        );
     }
});
//子組件
var Child = React.createClass({
    render: function(){
        return(
            <div>
                <h1>{this.props.msg}</h1>
                <ChildChild {...this.props} />
            </div>
        )
    }
});
//孫組件
var ChildChild = React.createClass({
    render: function(){
        return(
            <h1>{this.props.msg}</h1>
        )
    }
})
ReactDOM.render(<Father />,document.getElementById("contain"));

上述代碼中，是父組件向孫組件傳參。經過 ...運算符 將父組件的信息，以更加簡潔的方式傳遞給孫組件。上級組件 props 與 state 的改變，會致使組件自己及其子組件的生命週期改變。

查看（demo15）

注意： 若是組件嵌套層太深，那麼 props 傳值就變得沒有那麼高效。因此建議儘量的減小組件的層次，結構簡單清楚較好。

4. 數據從子組件到父組件

//父組件 
var Father = React.createClass({
    getInitialState: function(){
        return {
            checked: false
        }
    },
    onCheck: function(newState){
        this.setState({checked: newState});
    },
    render: function() {
        var isCheck = this.state.checked?"yes":"no";
        return (
          <div>
            <div>父組件的狀態：{isCheck}</div>
            <Child text="子組件勾選改變狀態:"
                    isCheck={this.state.checked}
                    callFather={this.onCheck}/>
          </div>
        );
     }
});
//子組件
var Child = React.createClass({
    getInitialState: function(){
        return{
            checked: this.props.inCheck
        };
    },
    onChangeState: function(){
        var newState = !this.state.checked;
        this.setState({
            checked : newState
        });
        //注意，須要調用父組件的方法實現數據從子組件傳給父組件
        this.props.callFather(newState);
    },
    render: function(){
        //子組件從父組件獲取值
        var text = this.props.text;
        //子組件自身的狀態
        var checked = this.state.checked;
        return(
            <div>{text}<input type="checkbox" checked={checked} onClick={this.onChangeState}/></div>
        )
    }
});
ReactDOM.render(<Father />,document.getElementById("contain"));

上面介紹過，父組件能夠經過 props 的方式，自上而下向子組件或是孫組件通信，而子組件向父組件通信也能夠經過 props ，只是父組件傳遞的是做用域爲父組件自己的函數，子組件調用該函數，將子組件須要傳遞的值做爲參數，傳給父組件的做用域中。

上述代碼中，父組件 <Father /> 它自己有一個函數 onCheck() ，子組件 <Child /> 經過 this.props 調用該函數，而後將傳遞的信息經過 newState 做爲參數傳給父組件。

查看（demo16）

還有另外一個例子在 github 上的 demo16 中的 index2.html，也是關於數據從子組件到父組件，不一樣的是，它是多個子組件調用同一個回調函數。

5. 兄弟組件之間傳值

擁有同一個父組件，可是沒有直接關聯關係的兩個組件就能夠稱之爲兄弟組件。

好比有兩個兄弟組件<Child01 /> <Child02 /> ，他們擁有同一個父組件 <Father /> ，若是咱們由 <Child01 /> 向 <Child02 /> 進行通信，那麼咱們能夠經過 <Child01 /> 先向 <Father /> 通信，而後經過 <Father /> 向 <Child02 /> 通信。這種方法就是結合了上述的子組件和父組件之間的通信 來完成的。

//父組件
var Father = React.createClass({
    getInitialState: function(){
        return{
            msg: "兄弟組件未更新"
        }
    },
    transferMsg: function(){
        this.setState({msg:"兄弟組件溝通成功"});
    },
    render: function(){
        return(
            <div>
                <p>兄弟組件之間進行通信</p>
                <Child01 transferMsg={this.transferMsg}/>
                <Child02 text={this.state.msg} />
            </div>
        )
    }
}); 
//子組件01
var Child01 = React.createClass({
    render: function(){
        return(
            <button onClick={this.props.transferMsg}>更新兄弟組件</button>
        )
    }
}); 
//子組件02
var Child02 = React.createClass({
    render: function(){
        return(
            <div>{this.props.text}</div>
        )
    }
}); 
ReactDOM.render(<Father />,document.getElementById("contain"));

上述代碼中，<Child01 /> 經過 this.props 回調 <Father /> 中的 transferMsg() 函數方法，而後 <Father /> 將信息傳遞給 <Child02 /> 。

查看（demo17）

有道雲筆記參考： http://note.youdao.com/noteshare?id=9905a9dc8d428c4e570a738279708a98&sub=6964AD2CE4C849C4A41A2749A69BB940