Заметки про React(@ru_react_notes). Применение принципов SOLID в React Принципы SOLID находят свое применение не только в ООП, их можно

Применение принципов SOLID в React Принципы SOLID находят свое применение не только в ООП, их можно применить и при разработке приложения React. Пользуясь этими принципами, можно обеспечить хорошую декомпозицию компонентов приложения. В своем блоге Константин Лебедев интерпретировал принципы SOLID в коде React. Например, как можно применить принцип разделения интерфейса:

// VideoList.tsx
type Video = {
  title: string
  duration: number
  coverUrl: string
}
type Props = {
  items: Array<Video>
}
const VideoList = ({ items }) => {
  return (
    <ul>
      {items.map(item => 
        <Thumbnail 
          key={item.title} 
          video={item} 
        />
      )}
    </ul>
  )
}

// Thumbnail.tsx
type Props = {
  video: Video
}
const Thumbnail = ({ video }: Props) => {
  return <img src={video.coverUrl} />
}

Компонент Thumbnail принимает объект video, хотя для работы данного компонента требуется только ссылка на изображение. Чтобы показать проблему, добавим новый тип видео в VideoList, у которого будет отличаться интерфейс объекта. В этом случае Thumbnail будет работать неправильно и его придется переделать. Сделаем так, чтобы Thumbnail принимал проп coverUrl – ссылку на изображение и будем передавать туда нужный проп в зависимости от типа видео:

type Props = {
  items: Array<Video | LiveStream>
}
const VideoList = ({ items }) => {
  return (
    <ul>
      {items.map(item => {
        if ('coverUrl' in item) {
          // it's a video
          return <Thumbnail coverUrl={item.coverUrl} />
        } else {
          // it's a live stream
          return <Thumbnail coverUrl={item.previewUrl} />
        }
      })}
    </ul>
  )
}

Принцип разделения интерфейса отвечает за минимизацию зависимостей между компонентами системы, делая их менее связанными и переиспользуемыми. https://konstantinlebedev.com/solid-in-react/