react 如何判断数据类型

判断数据类型的方法

在React中，判断数据类型通常依赖于JavaScript的原生方法，以下是几种常见的方式：

typeof 操作符

typeof 操作符可以返回一个字符串，表示未经计算的操作数的类型。适用于基本数据类型的判断：

console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" （注意：这是历史遗留问题）
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function() {}); // "function"

instanceof 操作符

instanceof 用于检测构造函数的 prototype 属性是否出现在对象的原型链中。适用于判断对象是否为特定类的实例：

console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(new Date() instanceof Date); // true

Array.isArray()

专门用于判断一个值是否为数组：

console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false

Object.prototype.toString.call()

最全面的类型判断方法，可以准确区分各种数据类型：

console.log(Object.prototype.toString.call(42)); // "[object Number]"
console.log(Object.prototype.toString.call('hello')); // "[object String]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call(function() {})); // "[object Function]"

自定义类型判断函数

可以封装一个通用的类型判断函数：

function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}

console.log(getType(42)); // "number"
console.log(getType([])); // "array"
console.log(getType(null)); // "null"

React中的特殊注意事项

在React组件中判断props的类型时，可以使用PropTypes（虽然React已将其移至单独包）：

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  children: PropTypes.node,
  onClick: PropTypes.func,
};

对于TypeScript用户，可以直接使用类型系统进行编译时检查：

interface Props {
  name: string;
  age: number;
  children: React.ReactNode;
  onClick: () => void;
}

这些方法组合使用可以覆盖绝大多数React开发中的类型判断需求。