ReactJS入門2:組件狀態

    React組件可以簡單看做是包含props和states的函數。

    上一節總結了創建新組建和數據屬性的傳遞。本節主要講解組件的狀態。

    React認為UI是不同狀態的展現。在React中，開發者只需更新組件的狀態，然后根據此新狀態呈現新的UI。在呈現新的UI時，React具有局部更新的特點，即：React只渲染有變化的部分。在介紹組件狀態之前，先了解一下React局部刷新的特點。

1.React的局部刷新

var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
});
//每隔500毫秒渲染一次組件
setInterval(function() {
  ReactDOM.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('content')
  );
}, 500);

      setInterval(function,time)方法用於設置計時器，作用是每隔time時間，會調用一次function。

     在文本字段中如入您的姓名后，React只會更改UI中的時間字符串，而不會將輸入的名字刷新掉。即：React渲染組件時，只對UI中發生變動的地方進行局部刷新。

 

2.使用state的情況

       當需要響應用戶輸入、服務器請求或時間的推移時，需要為組件添加state，其它情況應保持組件的無狀態。使盡可能多的組件處於無狀態，這樣可以將狀態隔離到合理的位置，減少冗余，從而使代碼更容易理解。（注意：局部刷新的例子中雖然有用戶輸入，但是並未作出響應，故沒有添加state。）

 

3.為組件添加state

       狀態應包含組件的事件處理程序可能更改的數據，以觸發UI更新。

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ;
    return (
      <p onClick={this.handleClick}>
        The state is {text}. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('content')
);

1.getInitialState() 用於定義初始狀態。可以通過this.state獲 取。
2.事件handleClick()用於修改組件的狀態。this.setState（）方法用來修改狀態值。
3.在render()的內部根據這個狀態作出相應。每次更新狀態后，自動調用this.render()方法重新渲染組件。

觸發事件前： 

         

觸發事件后：

4.復合組件

        創建復合組件的目的：通過構建新組件分離不同的問題。

        針對復合組件，React定義了一種新的關系：從屬關系（owner-ownee）；owner指調用其它組件的組件，ownee指被調用的組件。區別於父子關系，從屬關系是 React 特有的，而父子關系簡單來講就是DOM 里的標簽的關系。

       注意：為了保持UI的一致性，ownee不能修改props的值，必須和owner設置的值一致。即：值的修改必須放在owner中。

//owner
var CommentBox = React.createClass({
  render : function(){
    return (<div>
               <p>I am a box.</p>
               <CommentList author={this.props.author} />
            </div>);
  }
});
//ownee      
var CommentList = React.createClass({
  render : function(){
    return (<div>The author is {this.props.author}.</div>);
  }
});

ReactDOM.render(
  <CommentBox author='wei.hu' />,
  document.getElementById('content')
); 

 

5.組件策略

       常見的一種模式是“一個有狀態的組件+多個無狀態的組件”。有狀態的組件封裝了所有的交互邏輯，而無狀態組件以聲明的方式處理渲染數據。

 

  未完，待續。

  更多內容，請訪問：http://www.cnblogs.com/BlueStarWei/