ReactJS defaultProps

在React中，我们可以通过定义defaultProps来为组件设置默认值。这个特性非常有用，因为我们可以确保组件在未收到props时仍能正常工作，避免了意外的错误，并使代码更健壮。

定义

我们可以通过在组件的类属性中设置defaultProps属性来定义默认值。

class MyComponent extends React.Component {
  static defaultProps = {
    prop1: 'default value 1',
    prop2: 'default value 2',
  };

  render() {
    // render logic
  }
}

使用

当组件使用时，如果没有传递相关的props，那么React会自动使用defaultProps中定义的默认值。

<MyComponent />

在这个例子中，我们没有向MyComponent传递任何props，因此React会自动使用prop1和prop2的默认值。

如果我们传递了props，那么传递的值会覆盖defaultProps中定义的默认值。

<MyComponent prop1="custom value" />

在这个例子中，prop1的值已经被显式地传递给了MyComponent，并且它将覆盖默认值。

注意事项

• 只有未定义的props才会使用defaultProps中定义的默认值。如果一个props在组件中已经定义，但未被传递值，那么它会使用undefined而不是defaultProps中的值。
• defaultProps只会在组件实例化时使用，而不会在组件更新时使用。如果组件的props被更新，那么更新后的值将取代defaultProps中的默认值。
• defaultProps只在未指定值的情况下使用字符串值。如果需要使用其他类型的默认值，可以直接在组件中手动实现默认值的逻辑。

总结

defaultProps是React中非常有用的特性，可以保证组件在未收到props时仍能正常工作，并使代码更健壮。当定义和使用时需要注意细节，避免意外错误。