为什么 React 团队在函数式组件中弃用了 defaultProps

为什么 React 团队在函数式组件中弃用了 defaultProps ?

先上结论，因为没有必要。

在函数式组件中，我们完全可以使用 JS 默认参数的形式，来声明默认属性，如下：

function Foo({foo = 1, bar = "hello"}) {
  let props = {foo, bar};
  //...
}

这样做的好处是：对于大多数团队来说， React 的 defaultProps 是一个黑盒。

如果我们把默认属性的行为放在函数组件定义中，从代码质量的角度来说更加可控。

那么defaultProps设计之初是为了什么呢？

React 团队认为 defaultProps在类上非常有用。

因为props对象会被传递给许多不同的方法：生命周期、回调等等。每一个有函数内都拥有自己的上下文需要初始的默认值。这使得它很难使用 JS 默认参数来实现，因为你必须在每个函数中复制相同的默认值。如下示例：

class Foo {
  static defaultProps = {foo: 1};
  componentDidMount() {
    let foo = this.props.foo;
    console.log(foo);
  }
  componentDidUpdate() {
    let foo = this.props.foo;
    console.log(foo);
  }
  componentWillUnmount() {
    let foo = this.props.foo;
    console.log(foo);
  }
  handleClick = () => {
    let foo = this.props.foo;
    console.log(foo);
  }
  render() {
    let foo = this.props.foo;
    console.log(foo);
    return <div onClick={this.handleClick} />;
  }
}

一句话总结，defaultProps 的作用就是在类组件中，每个生命周期和方法的作用域中可以使用新的默认值。

因此，在 React 团队的后续更新中已经实现：在函数式组件中使用 defaultProps ， React 会在 createElement 中添加一个警告。这包括其他特殊组件，如 forwardRef和memo。

总结

1. 在函数式组件中应当使用 JS 函数默认参数定义组件默认属性，避免使用 defaultProps 。
2. 同时在使用框架提供的 Api 时，应当考虑适用场景。在编写代码时思考如何才能更简单、更可控的实现代码。

参考链接

## Deprecate defaultProps on function components