React 數據流與狀態控制－props與sate的區別

React 基於狀態實現對DOM控制和渲染。組件狀態分爲兩種：一種是組件間的狀態傳遞、另外一種是組件的內部狀態，這兩種狀態使用props和state表示。props用於從父組件到子組件的數據傳遞。組件內部也有本身的狀態：state，這些狀態只能在組件內部修改。

 

1. 數據流與Props
   • 1.1 設置props
   • 1.2 JSX語法中的屬性設置
   • 1.3 props的傳遞
2. 組件內部狀態與state
3. Props與state的比較

 

1. 數據流與Props

React中的數據流是單向的，只會從父組件傳遞到子組件。屬性props（properties）是父子組件間進行狀態傳遞的接口，React會向下遍歷整個組件樹，並從新渲染使用這個屬性的組件。

1.1 設置props

能夠在組件掛載時設置props：

var sites = [{title:'itbilu.com'}];
<ListSites sites={sites} />

也能夠經過調用組件實例的setProps()方法來設置props：

var sites = [{title:'itbilu.com'}];
var listSites = React.render(
  <ListSites />,
  document.getElementById('example')
)

setProps()方法只能在組件外調用，不能在組件內部調用this.setProps()修改組件屬性。組件內部的this.props屬性是隻讀的，只能用於訪問props，不能用於修改組件自身的屬性。

 

1.2 JSX語法中的屬性設置

JSX語法中，props能夠設置爲字符串：

<a href="http://itbilu.com">IT筆錄</a>

或是經過{}語法設置：

var obj = {url:'itbilu.com', name:'IT筆錄'};
<a href="http://{obj.url}">{obj.name}</a>

JSX方法還支持將props直接設置爲一個對象：

var site = React.createClass({
  render: function() {
    var obj = {url:'itbilu.com', name:'IT筆錄'};
    return: <Site {...obj} />;
  }
})

props還能夠用來添加事件處理：

var saveBtn =  React.createClass({
  render: function() {
    <a onClick={this.handleClick} >保存</>
  }
  handleClick: fuction() {
    //…
  }
})

 

1.3 props的傳遞

組件接收上級組件的props，並傳遞props到其下級組件。如：

var myCheckbox = React.createClass({
  render: myCheckbox() {
    var myClass = this.props.checked ? 'MyChecked' : 'MyCheckbox';
    return (
      <div className={myClass} onClick={this.props.onClick}>
        {this.props.children}
      </div>
    );
  }
});
React.render(
  <MyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </MyCheckbox>,
  document.getElementById('example')
);

 

2. 組件內部狀態與state

props能夠理解爲父組件與子組件間的狀態傳遞，而React的組件都有本身的狀態，這個內部狀態使用state表示。

如，用state定義一個<DropDown />組件的狀態：

var SiteDropdown = React.createClass({
  getInitalState: function() {
    return: {
      showOptions: false
    }
  },
  render: function() {
    var opts;
    if(this.state.showOptions) {
      <ul>
      	<li>itbilu.com</li>
      	<li>yijiebuyi.com</li>
      	<li>niefengjun.cn</li>
      </ul>
    };
    return (
      <div onClick={this.handleClick} >
      </ div>
    )
  },
  handleClick: function() {
    this.setSate({
      showOptions: true
    })
  }
});

隨着state的改變，render也會被調用，React會對比render的返回值，若是有變化就會DOM。

state與props相似，只能經過setSate()方法修改。不一樣的是，state只能在組件內部使用，其是對組件自己狀態的一個引用。

 

3. Props與state的比較

React會根據props或state更新視圖狀態。雖然兩者有些相似，但應用範圍確不盡相同。具體表現以下：

• props會在整個組件數中傳遞數據和配置，props能夠設置任命類型的數據，應該把它當作組件的數據源。其不但能夠用於上級組件與下組件的通訊，也能夠用其作爲事件處理器。
• state只能在組件內部使用，state只應該用於存儲簡單的視圖狀（如：上面示例用於控制下拉框的可見狀態）。
• props和state都不能直接修改，而應該分別使用setProps()和setSate()方法修改。