React学习笔记—组件复用
当我们在设计接口的时候,将一些常见的设计元素(如按钮、表单、布局等)拆分成有着良好接口的可重用的组件。这样的话,下次你构建UI的时候只要写少量的代码。 属性校验随着应用的增长,确保你的组件正确使用是有必要的。React允许我们指定propTypes。React.PropTypes声明了一系列的校验确保我们接收的数据是合法的。如果不合法的数据出现在属性当中,控制台会打印警告信息。下面是不同的校验类型: 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允许我们下面的方式自定义属性的默认值: var ComponentWithDefaultProps = React.createClass({ getDefaultProps: function() { return { value: 'default value' }; } /* ... */ }); getDefaultProps()的值将会被缓存,当this.props.value的值没有被父组件指定时,将会使用这个默认值。 属性转移通过属性延伸的语法,可以快速的将组件属性添加到HTML标签上: var CheckLink = React.createClass({ render: function() { // This takes any props passed to CheckLink and copies them to <a> return <a {...this.props}></a>; } }); React.render( <CheckLink href="/checked.html"> Click here! </CheckLink>,document.getElementById('example') ); 需要注意的是,这种写法会添加所有的属性。当标签内容为空时,children也会被添加其中。上面的例子是一个很好的实践。 混入在React当中,组件复用能够减少我们的代码量。但有时候不同的组件之间可能会相同的功能点。这个通常被叫做Cross-cutting concern。React提供了混入来解决这个问题。 var SetIntervalMixin = { componentWillMount: function() { this.intervals = []; },setInterval: function() { this.intervals.push(setInterval.apply(null,arguments)); },componentWillUnmount: function() { this.intervals.map(clearInterval); } }; var TickTock = React.createClass({ mixins: [SetIntervalMixin],// Use the mixin getInitialState: function() { return {seconds: 0}; },componentDidMount: function() { this.setInterval(this.tick,1000); // Call a method on the mixin },tick: function() { this.setState({seconds: this.state.seconds + 1}); },render: function() { return ( <p> React has been running for {this.state.seconds} seconds. </p> ); } }); React.render( <TickTock />,document.getElementById('example') ); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |