面试题：React 组件 PropTypes 复杂类型检查及默认值设置

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ myObject }) => {
  return (
    <div>
      <p>ID: {myObject.id}</p>
      <p>Title: {myObject.title}</p>
    </div>
  );
};

MyComponent.propTypes = {
  myObject: PropTypes.shape({
    id: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired
  }).isRequired
};

MyComponent.defaultProps = {
  myObject: {
    id: 1,
    title: '默认标题'
  }
};

export default MyComponent;

PropTypes 在 React 组件开发中的作用

类型检查：在开发过程中，通过 PropTypes 可以对组件接收到的 props 进行类型检查，确保传入的数据类型符合预期，有助于发现早期的错误。例如上述代码中，确保 myObject 中的 id 是数字类型，title 是字符串类型。
文档说明：PropTypes 起到了类似文档的作用，其他开发者在使用该组件时，可以很清晰地了解到这个组件期望接收什么样的 props，提高了代码的可维护性和可理解性。

PropTypes 的局限性

仅在开发环境有效：PropTypes 只在开发环境中进行类型检查，在生产环境中会被移除，这意味着生产环境中如果传入了不符合类型要求的数据，不会有类型检查报错，可能导致难以发现的运行时错误。
性能影响：虽然在生产环境中会被移除，但在开发环境中进行类型检查还是会带来一定的性能开销，特别是在大型应用中，频繁的类型检查可能对开发体验产生一些影响。
弱类型检查：PropTypes 提供的是相对宽松的类型检查，对于复杂的数据结构和深层次的对象嵌套，可能无法进行全面准确的检查。例如，对于一个嵌套多层的对象，PropTypes 难以对每一层的属性都进行严格检查。

面试题：React 组件 PropTypes 复杂类型检查及默认值设置

知识考点

面试题答案

PropTypes 在 React 组件开发中的作用

PropTypes 的局限性