React-高级教程完整版

React 高级教程完整版

这标题可能有点不太贴切或符合内容，从官方上来区分这部分内容确实属于高级部分，只是由于个人原因，在后面的一些章节并没有记录在列。

也为了承接上一篇，因此勉强将标题定位：“React 高级教程完整版”

纯属针对个人学习记录成果，无他~~~

属性类型检测（Typechecking With PropTypes）

React 内置了一系列的类型那个检测功能，通过 Comp.propTypes 对象指定，比如：

Comp.propTypes = {
    name: React.PropTypes.string
};

经过上面的指定之后，如果传入的 name 为非字符串的，会报错。

看个小示例：

// props-type-checking.html

class TypeCheck extends React.Component {
   
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <div>incoming prop: {
  this.props.sayHello}</div>
        );
    }
}

// 类型检测在类外面指定
TypeCheck.propTypes = {
    sayHello: React.PropTypes.string
};

ReactDOM.render(
    <TypeCheck sayHello={
  11111} />,
    document.getElementById('root')
);

报错内容：

Warning: Failed prop type: Invalid prop sayHello of type number supplied to TypeCheck, expected string in TypeCheck

检测类型：

类型	属性
数组	React.PropTypes.array
Boolean值	React.PropTypes.bool
函数	React.PropTypes.func
数字	React.PropTypes.number
对象	React.PropTypes.object
字符串	React.PropTypes.string
符号	React.PropTypes.symbol
DOM元素	React.PropTypes.node
React元素	React.PropTypes.element
某一个类的实例	React.PropTypes.instanceOf(Message)
属性值限定在某一范围	React.PropTypes.oneOf([‘News’, ‘Photos’]),
多种类型的一种	React.PropTypes.oneOfType([     React.PropTypes.string,     React.PropTypes.number,     React.PropTypes.instanceOf(Message) ])
数组且限定数组成员类型	React.PropTypes.arrayOf(React.PropTypes.number)
对象且限定对象成员值类型	React.PropTypes.objectOf(React.PropTypes.number)
特定形状的对象	React.PropTypes.shape({  color: React.PropTypes.string,  fontSize: React.PropTypes.number })

并且可以在上面的属性检测后面加上 isRequired 来指定该属性是否必须，不如指定了而没有传递该属性，则会报下面错误

Warning: Failed prop type: The prop sayHello is marked as required in TypeCheck, but its value is undefined in TypeCheck

如果直接使用 React.PropTypes.isRequired 也会报错：

Warning: Failed prop type: TypeCheck: prop type sayHello is invalid; it must be a function, usually from React.PropTypes. in TypeCheck

上面意思大概就是：sayHello 类型无效，必须是个函数，通常来自 React.PropTypes。

PropTypes: ReactPropTypes,

会发现 ReactPropTypes 其实是个包含类型检测函数的对象

var ReactPropTypes = {
  array: createPrimitiveTypeChecker('array'),
  bool: createPrimitiveTypeChecker('boolean'),
  func: createPrimitiveTypeChecker('function'),
  number: createPrimitiveTypeChecker('number'),
  object: createPrimitiveTypeChecker('object'),
  string: createPrimitiveTypeChecker('string'),
  symbol: createPrimitiveTypeChecker('symbol'),

  any: createAnyTypeChecker(),
  arrayOf: createArrayOfTypeChecker,
  element: createElementTypeChecker(),
  instanceOf: createInstanceTypeChecker,
  node: createNodeChecker(),
  objectOf: createObjectOfTypeChecker,
  oneOf: createEnumTypeChecker,
  oneOfType: createUnionTypeChecker,
  shape: createShapeTypeChecker
};

从上面可知 ReactPropTypes 对象下是没有 isRequired 这个属性的，再往下看，会发现其实 isRequired 是挂接在上面的执行结果之后的，也就是说就算指定了 isRequired 也会线执行上面的类型检查，然后再去根据 isRequired 值去进一步检测是类型不对还是压根没有传这个属性；

function createChainableTypeChecker(validate) {
   

    // 省略 ......

  function checkType