摘要：屬性校驗隨著應用的增長，確保你的組件正確使用是有必要的?；烊朐诋斨?，組件復用能夠減少我們的代碼量。官方舉例說明的一種情況一個組件，每隔一段時間更新一次。提供了組件生命周期的方法告訴我們組件什么時候被創(chuàng)建和銷毀。

當我們在設(shè)計接口的時候，將一些常見的設(shè)計元素（如按鈕、表單、布局等）拆分成有著良好接口的可重用的組件。這樣的話，下次你構(gòu)建UI的時候只要寫少量的代碼。

隨著應用的增長，確保你的組件正確使用是有必要的。React允許我們指定propTypes。React.PropTypes聲明了一系列的校驗確保我們接收的數(shù)據(jù)是合法的。如果不合法的數(shù)據(jù)出現(xiàn)在屬性當中，控制臺會打印警告信息。下面是不同的校驗類型：

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 
    return ;
  }
});

React.render(
  
    Click here!
  ,
  document.getElementById("example")
);

需要注意的是，這種寫法會添加所有的屬性。當標簽內(nèi)容為空時，children也會被添加其中。上面的例子是一個很好的實踐。

在React當中，組件復用能夠減少我們的代碼量。但有時候不同的組件之間可能會相同的功能點。這個通常被叫做Cross-cutting concern。React提供了混入來解決這個問題。
官方舉例說明的一種情況：一個組件，每隔一段時間更新一次。很容易就想到使用setInterval()，當不需要的時候需要取消Interval。React提供了組件生命周期的方法告訴我們組件什么時候被創(chuàng)建和銷毀。根據(jù)這些創(chuàng)建一個簡單的混入：

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 (
      

        React has been running for {this.state.seconds} seconds.
      
    );
  }
});

React.render(
  ,
  document.getElementById("example")
);