共计 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 }
});
正文完