9、React组件属性验证全解析

React组件属性验证全解析

1. 属性验证的重要性

属性验证的关键在于明确传入组件的属性值。例如，若组件期望接收一个数组，却传入了布尔值，很可能会出现问题。使用React内置的验证机制验证属性值，就能知晓传入了意外的值。若组件期望接收数组以调用 map() 方法，传入布尔值则会失败，因为布尔值没有 map() 方法，但在失败前会看到属性验证警告。

属性验证并非追求快速失败，而是为开发者提供信息。属性验证失败时，可知传入了不应作为组件属性的值，只需在代码中找到传入该值的位置并修复即可。

2. 促进组件的可移植性

当明确组件属性的预期时，组件的使用上下文就不那么重要了。只要组件能验证其属性值，它的使用位置无关紧要，可被任何功能使用。

若想创建跨应用功能的通用组件，可编写组件验证代码或编写在渲染时运行的防御性代码。但防御性编程会削弱声明式React组件的价值，使用React风格的属性验证可避免编写防御性代码。属性验证机制在验证不通过时会发出警告，提示开发者修复问题。

3. 简单属性验证器

3.1 基本类型验证

以下是处理JavaScript最基本类型值的验证器示例：

import React, { PropTypes } from 'react';
const MyComponent = ({
  myString,
  myNumber,
  myBool,
  myFunc,
  myArray,
  myObject,