React的PropTypes和DefaultProps

propTypes

propTypes是React中組件的一個特殊屬性。設置它，可以爲組件的props屬性進行類型的檢查。

要設置組件的propTypes屬性需要藉助PropTypes對象，或者說需要藉助props-type庫。

import PropTypes from 'prop-types';

注意首字母小寫的propsTypes是組件的屬性，而PropTypes是我們引入的庫。

要使用也非常簡單：

import PropTypes from 'prop-types';
import React, {Component} from 'react';
class Test extends Component{
    render(){
        return (
            <div>
                Hello, {this.props.word}
            </div>
        )
    }
}
// 設置Test組件的propTypes屬性
Test.propTypes = {
    word: PropTypes.string
};

在這個例子中，我們使用了PropTypes.string，意思是word的值應該是string類型的，一旦組件收到了非string的word prop則會報錯。

出於性能因素，類型檢查僅會在開發環境下進行。

PropTypes的驗證器

除了上面使用的PropTypes.string驗證器，還有許多其他的驗證器。

基本的JS類型

Test.propTypes = {
    optionalArray: PropTypes.array,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,
}

任何可以被渲染的元素

這裏指的是數字，字符串，react 元素，數組，fragment等。

Test.propTypes = {
    optionalNode: PropTypes.node
}

react元素

Test.propTypes = {
    optionalElement: PropTypes.element
}

某個類的實例

通過調用instanceOf操作實現

Test.propTypes = {
    optionalMessage: PropTypes.instanceOf(Message)
}

枚舉類型

JS中沒有枚舉類型，此處的枚舉是指可以把屬性值限定在某些值之中。

Test.propTypes = {
    optionalEnum: PropTypes.oneOf(['News', 'Photos'])
}

指定多個類型

Test.propTypes = {
    optionalUnion: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
        PropTypes.instanceOf(Message)
    ])
}

指定某個類型的數組

即可以檢查數組中的元素是哪種類型

Test.propTypes = {
    optionalArrayOf: PropTypes.arrayOf(PropTypes.number)
}

指定類型爲對象且對象的屬性是特定類型

Test.propTypes = {
    optionalObjectOf: PropTypes.objectOf(PropTypes.number)
}

指定類型爲對象且規定哪些屬性必須有，哪些可以沒有

Test.propTypes = {
    optionalObjectWithShape: PropTypes.shape({
        optionalProperty: PropTypes.string,
        requiredProperty: PropTypes.number.isRequired
    })
}

defaultProps

組件中還有一個特殊的屬性defaultProps。顧名思義，這是一個默認的props值。即當組件被引用時若沒有被傳入props，則使用defaultProps。

import PropTypes from 'prop-types';
import React, {Component} from 'react';
class Test extends Component{
    
    static defaultProps = {
        word: 'world'
    }

    render(){
        return (
            <div>
                Hello, {this.props.word}
            </div>
        )
    }
}