Принцип разделения интерфейсов (ISP) гласит, что клиенты не должны зависеть от методов, которые они не используют. В контексте React.js это означает, что компоненты не следует заставлять принимать реквизиты, которые они не используют.

Давайте рассмотрим пример компонента, нарушающего ISP:

interface Props 
  type: 'user' | 'project';
  project?: Project;
  user?: User;
}

const Notification: React.FC<Props> = ({ project, type, user }) => {
  if (type === 'project' && project) {
    return (
      <p>
        Your project {project.name} has {project.views} new views
      </p>
    );
  }
  if (type === 'user' && user) {
    return <p>The user {user.name} is now following you</p>;
  }
  return null;
};

Этот компонент нарушает ISP, потому что заставляет компонент принимать реквизиты проекта и пользователя, даже если они не нужны. Это может привести к таким проблемам, как:

  • Код беспорядочный и трудный для чтения из-за использования множества операторов if.
  • Компонент Notification принимает необязательные реквизиты, что приводит к ненужной сложности.
  • Компонент должен возвращать элемент JSX или значение null, поэтому, если ни одно из утверждений if не является истинным, компонент вернет значение null, что может привести к ошибкам в приложении.

Чтобы решить эту проблему, мы можем реорганизовать компонент, чтобы использовать более мелкие и целенаправленные компоненты. Следовательно, мы можем создать компонент ProjectNotification, который принимает реквизит проекта, и компонент UserNotification, который принимает реквизит пользователя.

interface ProjectNotificationProps 
  project: Project;
}

const ProjectNotification: React.FC<ProjectNotificationProps> = ({ project }) => (
  <p>
    Your project {project.name} has {project.views} new views
  </p>
);

interface UserNotificationProps {
  user: User;
}

const UserNotification: React.FC<UserNotificationProps> = ({ user }) => (
  <p>The user {user.name} is now following you</p>;
);

Этот рефакторинг устраняет проблемы, которые были вызваны тем, что исходный компонент нарушил ISP. Теперь компонент может принять только те реквизиты, которые ему нужны, что упрощает использование и тестирование компонента.

В заключение, ISP можно использовать для написания более удобных в обслуживании и повторно используемых компонентов React, гарантируя, что компоненты принимают только те реквизиты, которые им нужны.