React(4)-属性prop与状态state

共计 2447 个字符，预计需要花费 7 分钟才能阅读完成。

React属性prop的用法

1，直接使用

name = "",name={},name={[]},name={varible},name={(function(){return ...})()}

2，结构解析

var props = {one:123,key:"tattoo"}
<View {...props}>

3，setProps()方法

var intance = React.render(<Heoo />,document.body)
intance.setProps({name:"Tattoo"})

React状态state的用法

状态一定，结果一定；
1.getInitialState() 初始化状态
2.setState()更新部分state状态；replaceState()替换整个state状态

区分属性和状态的方法：

1.数据在组件运行时是否需要修改，是：状态，否：属性。

2.状态只由自己维护，组件不能修改属性。

属性和状态的共同点：

1.都是纯JS对象

2.都会触发runder的更新

3.都具有确定性

属性和状态的不同点：

	属性props	状态state
能否从父组件获取初始值	√	x
能否由父组件修改	√	x
能否在组件内部设置初始值	√	√
能否在组件内部修改	x	√
能否设置子组件的初始值	√	x
能否修改子组件的值	√	x

Prop Validation(prop验证方法)

React.createClass({
  propTypes: {
    // You can declare that a prop is a specific JS primitive. By default, these
    // are all optional.
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // Anything that can be rendered: numbers, strings, elements or an array
    // containing these types.
    optionalNode: React.PropTypes.node,

    // A React element.
    optionalElement: React.PropTypes.element,

    // You can also declare that a prop is an instance of a class. This uses
    // JS's instanceof operator.
    optionalMessage: React.PropTypes.instanceOf(Message),

    // You can ensure that your prop is limited to specific values by treating
    // it as an enum.
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // An object that could be one of many types
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // An array of a certain type
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // An object with property values of a certain type
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // An object taking on a particular shape
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // You can chain any of the above with `isRequired` to make sure a warning
    // is shown if the prop isn't provided.
    requiredFunc: React.PropTypes.func.isRequired,

    // A value of any data type
    requiredAny: React.PropTypes.any.isRequired,

    // You can also specify a custom validator. It should return an Error
    // object if the validation fails. Don't `console.warn` or throw, as this
    // won't work inside `oneOfType`.
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

React.createClass({
  propTypes: {
      survey:React.PropTypes.shape({
            id:React.PropTypes.number.isRequired
      }).isRequired,
      onClick:React.PropTypes.func
 }
});