最近學(xué)習(xí)淺嘗則止的學(xué)習(xí)了一下react.js這個(gè)UI的框架，react這個(gè)庫(kù)給我的最大的感覺(jué)就是它能夠完全的接管UI層，在要改變視圖的東西的時(shí)候只需要改變其this.state中的狀態(tài)。只要操作數(shù)據(jù)層的東西視圖層就會(huì)發(fā)生變化，這一點(diǎn)我還是很喜歡的。可以擺脫對(duì)DOM的直接操作，畢竟直接來(lái)會(huì)比較復(fù)雜，本來(lái)應(yīng)該是邏輯層js中混雜著各種css的字符串，對(duì)于我來(lái)說(shuō)有點(diǎn)不爽（JSX中也混雜這標(biāo)簽，但我覺(jué)的不應(yīng)該把它看作標(biāo)簽，看作語(yǔ)句會(huì)習(xí)慣一點(diǎn)）。

回到幾天的重點(diǎn)，講react組件之間的狀態(tài)傳遞。
上代碼：

1.定義兩個(gè)子組件child-1和child-2

  //child-1  子組件-1為輸入框
    class Input extends React.Component{
      constructor(...args){
      super(...args);
      }
      render(){
        return <input type="text"/>
      }
    }
    //child-2   子組-2為顯示框
    class Show extends React.Component{
      constructor(...args){
        super(...args);
      }
      render(){
        return <p></p>
      }

    }

2.定義父組件Parent并且將兩個(gè)子組件插入到父組件中

class Parent extends React.Component{
      constructor(...args){
        super(...args);
      }
      render(){
        return(
          <div>
            <Input}/>
            <Show/>
          </div>
        );
      }
    }

現(xiàn)在的任務(wù)是在組件1總輸入一些文字，同時(shí)在組件2中同時(shí)顯示出來(lái)。

分析：要讓組件2與組件1同步，就讓組件1和2都去綁定父組件的狀態(tài)。也就是說(shuō)讓兩個(gè)組件受控。數(shù)據(jù)的走向是，組件1將自身的數(shù)據(jù)提升到父層，并且保存在父層的狀態(tài)中。父層中的數(shù)據(jù)通過(guò)組件2中的props屬性傳遞到組件2中，并在視圖層進(jìn)行綁定。

• 第一步先綁定<Show/>組件

//在父層中的constructor中定義狀態(tài)為一個(gè)空的message，this.state = {message:''}
class Parent extends React.Component{
      constructor(...args){
        super(...args);
        this.state = {
          message:''
       }

然后在父組件中的<Show/>改為
<Show onShow={this.state.message}/>
接著來(lái)我們進(jìn)入到<Show/>組件中，給其內(nèi)容綁定這個(gè)穿件來(lái)的onShow屬性。<Show/>組件變?yōu)?/p>

class Show extends React.Component{
      constructor(...args){
        super(...args);
      }
      render(){
        return <p>{this.props.onShow}</p>
      }

這樣組件2顯示層的數(shù)據(jù)已經(jīng)綁定好了，接下來(lái)我們只要改變父親層狀態(tài)中的message的內(nèi)容就可以使綁定的顯示層的內(nèi)容跟著一起變化

• 將輸入層的狀態(tài)(數(shù)據(jù))提升到父親組件中.下面是改寫(xiě)后的組件1

class Input extends React.Component{
      constructor(...args){
          super(...args);
      }
        //將輸入的內(nèi)容更新到自身組件的狀態(tài)中,并且將改變后的狀態(tài)作為參數(shù)傳遞給該組件的一個(gè)自定義屬性onInp()
      fn(ev){ 
        this.props.onInp(ev.target.value);
      }
      render(){
        //用onInput(注意react中采用駝峰寫(xiě)法和原生的略有不同)綁定fn()函數(shù)
        return <input type="text"  onInput={this.fn.bind(this)}  value={this.props.content}/>
      }
    }

看到這里可能會(huì)有一個(gè)問(wèn)題:onInp()和content沒(méi)有啊?不要急,接著看

• 接著改寫(xiě)父組件中的輸入層子組件1,

  class Parent extends React.Component{
      constructor(...args){
        super(...args);
        this.state = {
          message:''
        };
      }
      //傳進(jìn)的text是其提升上來(lái)的狀態(tài),然后再更新父組件的狀態(tài)
      fn(text){
        this.setState({
          message:text
        })
      }
      render(){
        return(
          <div>
              /*
               onInp就出現(xiàn)在這里,并綁定一個(gè)函數(shù),
               并且有一個(gè)content將父組件的狀態(tài)同步到子組件中
             */
            <Input onInp={this.fn.bind(this)} content={this.state.message}/> 
            <Show onShow={this.state.message}/>
          </div>
        );
      }
    }

寫(xiě)完的代碼是這樣的

  // 父組
    class Parent extends React.Component{
      constructor(...args){
        super(...args);
        this.state = {
          message:''
        };
      }
      onInp(text){
        this.setState({
          message:text
        })
      }
      render(){
        return(
          <div>
            <Input onInp={this.onInp.bind(this)} content={this.state.message}/>
            <Show onShow={this.state.message}/>
          </div>
        );
      }
    }
    //child-1
    class Input extends React.Component{
      constructor(...args){
      super(...args);
      }
      fn(ev){
        this.props.onInp(ev.target.value);
      }
      render(){
        return <input type="text"  onInput={this.fn.bind(this)} value={this.props.content}/>
      }
    }
    //child-2
    class Show extends React.Component{
      constructor(...args){
        super(...args);
      }
      render(){
        return <p>{this.props.onShow}</p>
      }

    }
    //最后渲染出
    ReactDOM.render(
      <Parent/>,
      document.getElementById('app')
    );

瀏覽器效果兩個(gè)組件間能夠通信.png