React props和state

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

數據流和Props

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

設置props

1.可以在組件掛載時設置props

var sites = [{position:'xian'}];
<ListSites sites={sites}/>

2.也可以通過調用組件實例的setProps()方法來設置props

var sites = [{position:'xian'}];
var ListSites = React.render(
    <ListSites/>,
    document.getElementById('example');
)

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

JSX語法中props的設置

JSX語法中，props可以設置爲字符串

<a href="http://itbilu.com">Hello World</a>

或者是通過{}語法來設置

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

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

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

props還可以用來添加時間處理：

var saveBtn = React.createClass({
   render:function(){
     <a onClick={this.handleClick}>點我</a>
  }
  handleClick:function(){
    //some code
  }
})

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.log.bind(console)}>
  Hello world!
  </MyCheckbox>
  document.getElementById('example');
})

組件內部狀態與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>React</li>
         <li>Vue</li>
         <li>node</li>
      </ul>
    };
    return (
      <div onClick={this.handleClick}>
      </div>
   )
  },
  handleClick:function(){
    this.setSate({
      showOptions:true;
   })
  }
})

隨着state的改變，render也會被調用，React會對比render的返回值，如果有變化就會DOM
state與props類似，只能通過setState()方法修改。不同的是，state只能造組件內部使用，對其組件本身狀態的一個引用。

Props與state的比較

React會根據props或state更新視圖狀態。雖然兩者有些類似，但是應用範圍確不盡相同。具體表現如下：
1.props會在整個組件數中傳遞數據和配置，props可以設置任意類型的數據，應該把它當做組件的數據源。不但可以用於上級組件與下組件的通信，也可以用其做處理器。
2.state只能在組件內部使用，state只應該用於存儲簡單的視圖狀（如：上面的實例用於控制下拉框的可見狀態）。
3.props和state都不能直接修改，而應該分別使用setProps()和setSate()