首页 > 代码库 > 组件的重用性
组件的重用性
什么是组件的重用性?
我们把一个大的功能拆分为一个一个的小模块,比如按钮、表单、下拉框、轮播图等。
提高组件的重用性有什么好处呢?
1. 写更少的代码。
2. 减少开发时间。
3. 代码的bug更少。
4. 占用的字节更少。
为了保证数据的正确性,我们可以对props的数据进行验证,验证方法如下:
React.createClass({
propTypes:{
optionArray : React.PropTypes.array
}
})
React 允许你为组件设置默认的props:
var componentDefaultProps = React.createClass({ getDefaultProps : function(){ return{ value : "default value" } } })
当然,props也是可以重其他地方传入的:
class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
PropTypes 和 defaultProps有什么区别呢?
PropTypes只定义props中对应的值的类型,验证规则。
defaultProps是设置props中默认的值。
export class Counter extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); } } Counter.propTypes = { initialCount: React.PropTypes.number }; Counter.defaultProps = { initialCount: 0 };
// 用ES6的写法如下
const HelloMessage = (props) => <div>Hello, {props.name}</div>;
HelloMessage.propTypes = { name: React.PropTypes.string }
HelloMessage.defaultProps = { name: ‘John Doe‘ }
ReactDOM.render(<HelloMessage name="M?d?lina"/>, mountNode);
它的语法和ES6的一样,所以它不会自动绑定this,可以显示的使用bind(this) 或者 使用箭头函数来进行绑定。
绑定的方式有很多,但最方便,最好的绑定方式是在构造器constructor中绑定,在此绑定一次,其他地方都可以使用了。
constructor(props) { super(props); this.state = {count: props.initialCount}; this.tick = this.tick.bind(this); } // It is already bound in the constructor <div onClick={this.tick}>
参考地址:http://reactjs.cn/react/docs/reusable-components.html
组件的重用性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。