組件的重用性

什麼是組件的重用性？

咱們把一個大的功能拆分爲一個一個的小模塊，好比按鈕、表單、下拉框、輪播圖等。

提升組件的重用性有什麼好處呢？

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