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提供了混入来解决这个问题。
官方举例说明的一种情况：一个组件，每隔一段时间更新一次。很容易就想到使用setInterval()，当不需要的时候需要取消Interval。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')
);