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()