5.6 使用getDefaultProps()获取默认Props

在React的早期版本中（特别是React 15及以前），getDefaultProps()方法被广泛用于为组件定义默认的props值。这种方法允许组件在接收到不完全的props时，依然能够正常运行，因为它会填充那些未提供的props的默认值。然而，随着React的发展，特别是在React 16及更高版本中，getDefaultProps()方法已经被官方废弃，取而代之的是直接在组件内通过静态属性defaultProps来定义默认props。尽管如此，了解getDefaultProps()的工作原理对于理解React组件的演进历史以及处理旧代码库仍然具有重要意义。

5.6.1 getDefaultProps()方法简介

在React类组件中，getDefaultProps()是一个类方法，用于返回一个对象，该对象的属性会作为组件props的默认值。如果父组件在调用子组件时没有提供某些props，React会自动使用getDefaultProps()返回的对象中的相应属性值作为这些未提供props的默认值。

class MyComponent extends React.Component {
  static getDefaultProps() {
    return {
      name: 'Guest',
      isLoggedIn: false
    };
  }
  render() {
    return (
      <div>
        <p>Hello, {this.props.name}!</p>
        <p>You are {this.props.isLoggedIn ? 'logged in' : 'not logged in'}.</p>
      </div>
    );
  }
}
// 使用MyComponent时，即使不传递任何props，它也会显示：
// Hello, Guest!
// You are not logged in.

需要注意的是，虽然上面的代码示例使用了static关键字来标记getDefaultProps方法，但实际上在React 15及以前，getDefaultProps并不是一个静态方法，而是作为类的一个实例方法存在。然而，为了清晰起见，并考虑到后续React版本的演变，我们在这里以“应该”是静态方法的方式来讨论它，尽管这在历史版本中并不准确。

5.6.2 为什么getDefaultProps()被废弃

随着React的发展，开发者社区和React团队逐渐认识到getDefaultProps()方法存在的一些问题和局限性：

1. 类型安全问题：getDefaultProps返回的默认值不会进行类型检查，这可能导致运行时错误，尤其是在使用TypeScript或Flow等静态类型检查工具时。
2. 与ES6类属性冲突：在JavaScript ES6中，类属性提案（Class Fields）允许直接在类体中定义实例属性，这与getDefaultProps返回的对象在语义上有所冲突，且在实际应用中可能引发混淆。
3. 静态属性defaultProps的引入：为了解决上述问题，React引入了defaultProps作为组件的一个静态属性，用于定义默认props，这种方式更加直观、易于理解，并且与ES6类属性更兼容。

5.6.3 替代方案：defaultProps静态属性

从React 15.5版本开始，官方推荐使用defaultProps静态属性来定义默认props，以替代getDefaultProps()方法。使用defaultProps不仅使代码更加简洁，而且避免了getDefaultProps方法带来的潜在问题。

class MyComponent extends React.Component {
  static defaultProps = {
    name: 'Guest',
    isLoggedIn: false
  };
  render() {
    return (
      <div>
        <p>Hello, {this.props.name}!</p>
        <p>You are {this.props.isLoggedIn ? 'logged in' : 'not logged in'}.</p>
      </div>
    );
  }
}
// 使用MyComponent时，效果与上例相同

在上面的代码中，defaultProps被定义为一个静态属性，直接赋值为一个对象，该对象包含了所有需要默认值的props。这种方式不仅减少了代码量，而且提高了代码的可读性和可维护性。

5.6.4 注意事项

1. 默认值应为不可变值：为了保持组件的纯净和可预测性，应确保defaultProps中的默认值是不可变的。对于复杂数据类型（如对象或数组），应提供新的实例或空对象/数组，以避免在多个组件实例间共享状态。

2. defaultProps与propTypes：虽然defaultProps用于定义默认值，但使用propTypes进行类型检查仍然是一个好习惯。propTypes可以帮助你捕获在开发阶段可能发生的错误，确保props符合预期的类型和形状。

3. 函数组件中的默认Props：在函数组件中，没有defaultProps或getDefaultProps()的概念。相反，你可以使用ES6的默认参数特性来为函数组件的props设置默认值。

function MyComponent({ name = 'Guest', isLoggedIn = false }) {
  return (
    <div>
      <p>Hello, {name}!</p>
      <p>You are {isLoggedIn ? 'logged in' : 'not logged in'}.</p>
    </div>
  );
}

5.6.5 结论

尽管getDefaultProps()在React的早期版本中扮演了重要角色，但随着React的发展，它已经被官方废弃，并被更加直观、易于理解和维护的defaultProps静态属性所取代。了解getDefaultProps()的历史和局限性，对于处理旧代码库以及理解React组件的演进过程至关重要。然而，在编写新的React应用时，应优先使用defaultProps或函数组件的默认参数特性来定义默认props。