组件的重用性

Posted 2020-09-01 此生依然

什么是组件的重用性？

我们把一个大的功能拆分为一个一个的小模块，比如按钮、表单、下拉框、轮播图等。

提高组件的重用性有什么好处呢？

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