Приведите пример принципа Open/Closed во фронтенд-разработке, например через render props.

Что такое принцип Open/Closed?

Принцип Open/Closed (OCP) — один из пяти принципов SOLID. Он гласит: программные сущности (классы, модули, функции) должны быть открыты для расширения, но закрыты для изменения. Это значит, что вы можете добавлять новую функциональность, не трогая уже написанный и протестированный код. В противном случае каждое изменение может сломать существующее поведение.

Как это работает во фронтенде?

Во фронтенд-разработке, особенно в React, этот принцип часто реализуется через композицию компонентов. Один из паттернов — render props. Суть в том, что компонент принимает функцию (render prop), которая возвращает React-элементы. Компонент управляет логикой и состоянием, а внешний код решает, как именно отрисовать данные. Таким образом, компонент остаётся закрытым для изменений, но открытым для расширения: вы можете использовать его с разными render-функциями, не редактируя сам компонент.

Пример на React

Представьте компонент MouseTracker, который отслеживает позицию курсора. Вместо того чтобы жёстко задавать вывод, он использует render prop:

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// Использование: расширяем поведение без изменения MouseTracker
<MouseTracker render={({ x, y }) => (
  <h1>Координаты: {x}, {y}</h1>
)} />

Теперь, если нужно показать координаты в другом формате или добавить стили, вы просто передаёте другую render-функцию. Компонент MouseTracker не меняется — он закрыт для модификации, но открыт для расширения.

Где это применяется?

Render props широко используются в библиотеках (например, React Router, Formik) и в собственных компонентах, когда нужно отделить логику от представления. Это также помогает избежать prop drilling и делает код более декларативным.

Вывод

Принцип Open/Closed через render props позволяет создавать гибкие и переиспользуемые компоненты, которые легко адаптировать под новые требования без риска сломать существующую функциональность. Применяйте этот подход, когда у вас есть повторяющаяся логика, но разные способы отображения данных.