react的state和props

state状态和props属性是react非常重要的两个方面，状态控制组件内部的变化，属性获取外部传递给内部的数据，当state和props改变时，会重新调用render方法，渲染dom对象。

state状态

常用方法：

getInitialState:获取组件的初始化状态，在组件加载的时候调用（render前）
this.state:获取组件的状态的值，但不能通过this.state.xxx = xxx改变状态的值
this.setState:用来改变组件状态的值，用法如下

var Radio= React.createClass({ 
  // 定义组件的初始状态，初始为关 
  getInitialState: function() {
     return { checked: false } 
  }, // 通过 this.state 获取当前状态 
  changeCheck: function() { 
    this.setState({ checked: !this.state.checked}); }
 }),
  render: function() {
     return <label className="radio"> 
        <input type="radio" checked={this.state.checked} onChange={this.changeCheck}/> 选中
      </label> 
},
 // 通过 setState 修改组件状态 // setState 过后会 React 会调用 render 方法重渲染

props属性

常用方法：
1.this.props.xxx 用来获取写在组件中的xxx属性的值注意jsx中class属性为 className，for属性为 htmlFor；
2.getDefaultProps：获取默认的属性对象，在render前调用一次，用于将组件中绑定的属性添加到this.props ；可以设置默认值，当组件属性没传值时，调用默认值；
3.this.props.children ：获取子节点的属性，其中children只能为一个元素，不能为组件

var GetChildItem = React.createClass({ 
  render: function() { 
    var props = this.props; 
    return <div className="todo-item"> 
      <span class="todo-item__name">{props.children}</span> 
    </div> 
    }
 });
 ReactDOM.render( 
    <GetChildItem >子节点内容</GetChildItem >, document.getElementById('example'));

propsType用来校验属性传递的正确性（非空，类型验证等）,通常写在最前面；

    var MyComponent = React.createClass({
        propTypes: {
            optionalRequired:React.PropTypes.isRequired,//不能为空
            optionalArray: React.PropTypes.array,
            optionalBool: React.PropTypes.bool,
            optionalFunc: React.PropTypes.func,
            optionalNumber: React.PropTypes.number,
            optionalObject: React.PropTypes.object,
            optionalString: React.PropTypes.string,
            // 任何可以被渲染的包括，数字，字符串，组件，或者数组
            optionalNode: React.PropTypes.node,
            // React 元素
            optionalElement: React.PropTypes.element,
            customProp: function(props, propName, componentName) {}//自定义校验
        }
    });

react的state和props

state状态

props属性

推荐阅读更多精彩内容