React組件屬性部類（propTypes）校正

標籤：option   clear   失效   意義   argument   oftype   數字   val   執行個體   

React組件屬性類型（propTypes）校正

Prop 驗證

隨著應用不斷變大，保證組件被正確使用變得非常有用。為此我們引入propTypes。React.PropTypes 提供很多驗證器 (validator) 來驗證傳入資料的有效性。當向 props 傳入無效資料時，JavaScript 控制台會拋出警告。注意為了效能考慮，只在開發環境驗證 propTypes。下面用例子來說明不同驗證器的區別：

React.createClass({  propTypes: {    // 可以聲明 prop 為指定的 JS 基本類型。預設    // 情況下，這些 prop 都是可傳可不傳的。    optionalArray: React.PropTypes.array,    optionalBool: React.PropTypes.bool,    optionalFunc: React.PropTypes.func,    optionalNumber: React.PropTypes.number,    optionalObject: React.PropTypes.object,    optionalString: React.PropTypes.string,    // 所有可以被渲染的對象：數字，    // 字串，DOM 元素或包含這些類型的數組。    optionalNode: React.PropTypes.node,    // React 元素    optionalElement: React.PropTypes.element,    // 用 JS 的 instanceof 操作符聲明 prop 為類的執行個體。    optionalMessage: React.PropTypes.instanceOf(Message),    // 用 enum 來限制 prop 只接受指定的值。    optionalEnum: React.PropTypes.oneOf([‘News‘, ‘Photos‘]),    // 指定的多個物件類型中的一個    optionalUnion: React.PropTypes.oneOfType([      React.PropTypes.string,      React.PropTypes.number,      React.PropTypes.instanceOf(Message)    ]),    // 指定類型組成的數組    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),    // 指定類型的屬性構成的對象    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),    // 特定形狀參數的對象    optionalObjectWithShape: React.PropTypes.shape({      color: React.PropTypes.string,      fontSize: React.PropTypes.number    }),    // 以後任意類型加上 `isRequired` 來使 prop 不可空。    requiredFunc: React.PropTypes.func.isRequired,    // 不可空的任意類型    requiredAny: React.PropTypes.any.isRequired,    // 自訂驗證器。如果驗證失敗需要返回一個 Error 對象。不要直接    // 使用 `console.warn` 或拋異常，因為這樣 `oneOfType` 會失效。    customProp: function(props, propName, componentName) {      if (!/matchme/.test(props[propName])) {        return new Error(‘Validation failed!‘);      }    }  },  /* ... */});

預設 Prop 值

React 支援以聲明式的方式來定義 props 的預設值。

var ComponentWithDefaultProps = React.createClass({  getDefaultProps: function() {    return {      value: ‘default value‘    };  }  /* ... */});

當父級沒有傳入 props 時，getDefaultProps() 可以保證 this.props.value 有預設值，注意 getDefaultProps 的結果會被 緩衝。得益於此，你可以直接使用 props，而不必寫手動編寫一些重複或無意義的代碼。

傳遞 Props：小技巧

有一些常用的 React 組件只是對 HTML 做簡單擴充。通常，你想少寫點代碼來把傳入組件的 props 複製到對應的 HTML 元素上。這時 JSX 的 spread 文法會幫到你：

var CheckLink = React.createClass({  render: function() {    // 這樣會把 CheckList 所有的 props 複製到 <a>    return <a {...this.props}>{‘√ ‘}{this.props.children}</a>;  }});React.render(  <CheckLink href="/checked.html">    Click here!  </CheckLink>,  document.getElementById(‘example‘));

單個子級

React.PropTypes.element 可以限定只能有一個子級傳入。

var MyComponent = React.createClass({  propTypes: {    children: React.PropTypes.element.isRequired  },  render: function() {    return (      <div>        {this.props.children} // 有且僅有一個元素，否則會拋異常。      </div>    );  }});

Mixins

組件是 React 裡複用代碼最佳方式，但是有時一些複雜的組件間也需要共用一些功能。有時會被稱為 跨切面關注點。React 使用 mixins 來解決這類問題。

一個通用的情境是：一個組件需要定期更新。用 setInterval() 做很容易，但當不需要它的時候取消定時器來節省記憶體是非常重要的。React 提供 生命週期方法 來告知組件建立或銷毀的時間。下面來做一個簡單的 mixin，使用 setInterval() 並保證在組件銷毀時清理定時器。

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], // 引用 mixin  getInitialState: function() {    return {seconds: 0};  },  componentDidMount: function() {    this.setInterval(this.tick, 1000); // 調用 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‘));

關於 mixin 值得一提的優點是，如果一個組件使用了多個 mixin，並且有多個 mixin 定義了同樣的生命週期方法（如：多個 mixin 都需要在組件銷毀時做資源清理操作），所有這些生命週期方法都保證會被執行到。方法執行順序是：首先按 mixin 引入順序執行 mixin 裡方法，最後動作項目內定義的方法。

React組件屬性部類（propTypes）校正