javascript - 在 React 应用程序中应该使用 isRequired for PropType vs defaultProps 的场景是什么

Question

我一直在努力理解，到底什么时候应该使用 .isRequired vs .defaultProps={...} 我的想法是，我认为我永远都不应该真正需要使用 isRequired，因为它似乎手动创建了一个可以破坏应用程序的错误，因为创建 isRequired 会自动删除添加相应默认 Prop 的需要，这让我感到不舒服因为这意味着我无法期待故障安全值。

这听起来确实是一个基于意见的问题，但我正在寻找一个更好的意见，如果有的话，它会更有意义。

Answer 1

使用 prop 类型是记录组件 API 的好方法，这样其他人无需阅读代码就知道它是如何工作的。

通常的想法是，如果提供了所有必需的 Prop ，组件就可以保证无错误地呈现。不需要的 Prop 只会增强组件的附加功能。

考虑这个例子

function UserCard({ name, avatarUrl }) {
  return (
    <div>
      <p>{name}</p>
      {avatarUrl && <img src={avatarUrl} />}
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  avatarUrl: PropTypes.string
};

现在，如果您想要呈现未提供的默认个人资料图片，您可以删除组件内的条件检查并改为提供默认值。

function UserCard({ name, avatarUrl }) {
  return (
    <div>
      <p>{name}</p>
      <img src={avatarUrl} />
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  avatarUrl: PropTypes.string
};

UserCard.defaultProps = {
  avatarUrl: "/assets/generic-picture.png"
};