What are the scenarios one should use isRequired for PropType vs defaultProps in React Application

Question

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

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

Answer 1

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

通常的想法是，如果提供了所有必需的 props，则保证组件渲染时不会出现错误。不需要的 props 只会增强组件的附加功能。

考虑这个例子

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"
};