面试题：什么是 React 的 getDefaultProps？它有什么作用？

getDefaultProps 是 React 早期（使用 React.createClass 方式） 用于为组件定义默认 props 的一个特殊方法。

历史背景与现状

• 属于 React.createClass：getDefaultProps 是在 React 使用 React.createClass({...}) 工厂函数创建组件的时代（React v15.5 之前）的特性。
• 已废弃：从 React v15.5 开始，React.createClass 被标记为废弃。React 推荐使用 ES6 的 class 语法来创建组件。
• 现代替代方案：在现代 React（类组件和函数组件）中，getDefaultProps 不再使用，其功能由更简洁的语法替代。

---

getDefaultProps 的作用

它的核心作用是：为组件的 props 定义默认值。

当父组件没有传递某个 prop 时，该 prop 将自动使用在 getDefaultProps 中定义的默认值。

语法示例（已废弃）

// ⚠️ 已废弃的写法
const MyComponent = React.createClass({
  // 定义默认的 props
  getDefaultProps() {
    return {
      name: 'Guest',
      age: 18,
      isActive: true
    };
  },

  render() {
    return (
      <div>
        <p>姓名: {this.props.name}</p>
        <p>年龄: {this.props.age}</p>
        <p>状态: {this.props.isActive ? '活跃' : '非活跃'}</p>
      </div>
    );
  }
});

// 使用
<MyComponent /> 
// 渲染结果: 姓名: Guest, 年龄: 18, 状态: 活跃

<MyComponent name="Alice" age={25} /> 
// 渲染结果: 姓名: Alice, 年龄: 25, 状态: 活跃 (isActive 使用默认值)

---

现代 React 中的替代方案

由于 getDefaultProps 已废弃，现代 React 提供了更简洁、更符合 JavaScript 语法的方式。

1. 类组件 (Class Components)

使用 静态属性 defaultProps。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <p>姓名: {this.props.name}</p>
        <p>年龄: {this.props.age}</p>
        <p>状态: {this.props.isActive ? '活跃' : '非活跃'}</p>
      </div>
    );
  }
}

// ✅ 现代类组件的写法
MyComponent.defaultProps = {
  name: 'Guest',
  age: 18,
  isActive: true
};

或者使用类字段语法（需要 Babel 支持）：

class MyComponent extends React.Component {
  // 使用类字段语法
  static defaultProps = {
    name: 'Guest',
    age: 18,
    isActive: true
  };

  render() {
    // ...
  }
}

2. 函数组件 (Function Components) —— 推荐方式

使用 ES6 函数参数的默认值。

// ✅ 现代函数组件的推荐写法
function MyComponent({ name = 'Guest', age = 18, isActive = true }) {
  return (
    <div>
      <p>姓名: {name}</p>
      <p>年龄: {age}</p>
      <p>状态: {isActive ? '活跃' : '非活跃'}</p>
    </div>
  );
}

// 或者使用对象解构的默认值
const MyComponent = ({ name, age, isActive }) => {
  // 手动设置默认值（较少用）
  const finalName = name || 'Guest';
  const finalAge = age !== undefined ? age : 18;
  const finalActive = isActive !== undefined ? isActive : true;
  // ...
};

---

getDefaultProps 与 propTypes 的关系

在 React.createClass 时代，getDefaultProps 通常与 propTypes 一起使用：

const MyComponent = React.createClass({
  propTypes: {
    name: PropTypes.string,
    age: PropTypes.number,
    isActive: PropTypes.bool
  },
  getDefaultProps() {
    return {
      name: 'Guest',
      age: 18,
      isActive: true
    };
  },
  render() { /* ... */ }
});

在现代 React 中，propTypes 也通过静态属性设置：

MyComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  isActive: PropTypes.bool
};

---

总结

特性	说明
getDefaultProps	⚠️ 已废弃，仅在 React.createClass 中使用。
作用	为组件的 props 定义默认值。
现代替代方案	类组件: MyComponent.defaultProps = {} 或 static defaultProps函数组件: function MyComponent({ prop = defaultValue })
当前建议	不要在新项目中使用 getDefaultProps。使用现代的 defaultProps 静态属性或函数参数默认值。

核心要点：getDefaultProps 是一个历史遗留概念。理解它有助于阅读旧代码，但在现代 React 开发中，应使用 defaultProps 静态属性（类组件）或函数参数默认值（函数组件）来设置默认 props。