5.6使用getDefaultProps()获取默认props-React全家桶--前端开发与实例(上)

当前位置:　首页>> 技术小册>> React全家桶--前端开发与实例(上)

### 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的默认值。

```jsx
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`方法带来的潜在问题。

```jsx
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设置默认值。

```jsx
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。

该分类下的相关小册推荐：

深入学习React实战进阶

React 进阶实践指南

剑指Reactjs

ReactJS面试指南

React全家桶--前端开发与实例(下)