React将移除函数组件的defaultProps特性

21 min read

自 React 15.5 开始,React 将移除函数组件的 defaultProps 特性。这是因为函数组件被设计为无状态的组件,并且不支持实例化,因此无法访问 defaultProps

在 React 15.5 之前的版本中,我们可以在函数组件中使用 defaultProps 来定义默认的属性值。例如:

function MyComponent(props) {
  // ...
}

MyComponent.defaultProps = {
  color: 'blue',
};

然而,自 React 15.5 开始,我们需要使用其他方法来定义默认的属性值。一种常用的方法是使用解构赋值来设置默认值。例如:

function MyComponent(props) {
  const { color = 'blue' } = props;
  // ...
}

另一种方法是使用逻辑运算符 || 来设置默认值。例如:

function MyComponent(props) {
  const color = props.color || 'blue';
  // ...
}

需要注意的是,在使用非函数组件(类组件)时,defaultProps 的特性仍然存在。我们可以在类组件中使用 static 关键字来定义 defaultProps。例如:

class MyComponent extends React.Component {
  static defaultProps = {
    color: 'blue',
  };
  
  render() {
    // ...
  }
}

总结来说,移除函数组件的 defaultProps 是为了更好地强调函数组件的无状态性质,并推荐使用其他方法来定义默认的属性值。