M

MLOG

Українська

Розкрийте потенціал патерну Render Props у React. Дізнайтеся, як він сприяє повторному використанню коду, композиції компонентів та розділенню відповідальності, що дозволяє створювати гнучкі та підтримувані додатки для міжнародної аудиторії.

Патерн Render Props у React: Гнучка логіка компонентів для глобальної аудиторії

У світі фронтенд-розробки, що постійно розвивається, особливо в екосистемі React, архітектурні патерни відіграють вирішальну роль у створенні масштабованих, підтримуваних та повторно використовуваних компонентів. Серед цих патернів, Render Props виділяється як потужна техніка для спільного використання коду та логіки між компонентами React. Ця стаття має на меті надати всебічне розуміння патерну Render Props, його переваг, варіантів використання та того, як він сприяє створенню надійних та адаптивних додатків для глобальної аудиторії.

Що таке Render Props?

Render Prop — це проста техніка для спільного використання коду між компонентами React за допомогою пропса, значенням якого є функція. По суті, компонент з render prop приймає функцію, яка повертає елемент React, і викликає цю функцію для рендерингу. Компонент не вирішує, що саме рендерити; він делегує це рішення функції render prop, надаючи їй доступ до свого внутрішнього стану та логіки.

Розглянемо цей базовий приклад:


class DataProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    // Симулюємо отримання даних
    setTimeout(() => {
      this.setState({ data: 'Some data from an API' });
    }, 1000);
  }

  render() {
    return this.props.render(this.state.data);
  }
}

function MyComponent() {
  return (
     (
        

          {data ? 
Data: {data}
 : 
Loading...
}
        

      )}
    />
  );
}

У цьому прикладі, DataProvider отримує дані та передає їх у функцію пропса render, надану компонентом MyComponent. MyComponent потім використовує ці дані для рендерингу свого контенту.

Навіщо використовувати Render Props?

Патерн Render Props пропонує кілька ключових переваг:

Реальні приклади використання та міжнародні кейси

Патерн Render Props є цінним у різноманітних сценаріях. Ось кілька поширених випадків використання з прикладами, що враховують глобальну аудиторію:

1. Відстеження миші

Уявіть, що ви хочете відстежувати положення миші на веб-сторінці. Використовуючи Render Prop, ви можете створити компонент MouseTracker, який надає координати миші своїм дочірнім компонентам.


class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

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

  render() {
    return (
      

        {this.props.render(this.state)}
      

    );
  }
}

function MyComponent() {
  return (
     (
        
The mouse position is ({x}, {y})

      )}
    />
  );
}

Це легко адаптувати для інтернаціоналізованих додатків. Наприклад, уявіть собі додаток для малювання, яким користуються художники в Японії. Координати миші можна було б використовувати для керування мазками пензля:


 (
    
  )}
/>

2. Отримання даних з API

Отримання даних з API — поширена задача у веб-розробці. Компонент Render Prop може обробляти логіку отримання даних і надавати дані своїм дочірнім компонентам.


class APIFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null, loading: true, error: null };
  }

  async componentDidMount() {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data: data, loading: false });
    } catch (error) {
      this.setState({ error: error, loading: false });
    }
  }

  render() {
    return this.props.render(this.state);
  }
}

function MyComponent() {
  return (
     {
        if (loading) return 
Loading...
;
        if (error) return 
Error: {error.message}
;
        return 
{JSON.stringify(data, null, 2)}
;
      }}
    />
  );
}

Це особливо корисно при роботі з локалізованими даними. Наприклад, уявіть відображення курсів валют для користувачів у різних регіонах:


 {
    if (loading) return 
Loading exchange rates...
;
    if (error) return 
Error fetching exchange rates.
;

    return (
      
    
        {Object.entries(data.rates).map(([currency, rate]) => (
          
  • {currency}: {rate}
    • 
        ))}
      

    );
  }}
/>

3. Обробка форм

Керування станом форми та валідацією може бути складним. Компонент Render Prop може інкапсулювати логіку форми та надавати стан форми та обробники своїм дочірнім компонентам.


class FormHandler extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '', error: null };
  }

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    if (this.state.value.length < 5) {
      this.setState({ error: 'Value must be at least 5 characters long.' });
      return;
    }
    this.setState({ error: null });
    this.props.onSubmit(this.state.value);
  };

  render() {
    return this.props.render({
      value: this.state.value,
      handleChange: this.handleChange,
      handleSubmit: this.handleSubmit,
      error: this.state.error
    });
  }
}

function MyComponent() {
  return (
     alert(`Submitted value: ${value}`)}
      render={({ value, handleChange, handleSubmit, error }) => (
        

          
          {error && 
{error}
}
          
        

      )}
    />
  );
}

Розгляньте можливість адаптації правил валідації форми для врахування міжнародних форматів адрес. Компонент FormHandler може залишатися загальним, тоді як render prop визначає специфічну логіку валідації та UI для різних регіонів:


 sendAddressToServer(address)}
  render={({ value, handleChange, handleSubmit, error }) => (
    

      {/* Поля для адреси, адаптовані до регіональних форматів */}
      
      {error && 
{error}
}
      
    

  )}
/>

4. Feature Flags та A/B-тестування

Render Props також можна використовувати для керування feature flags (функціональними прапорами) та проведення A/B-тестів. Компонент Render Prop може визначати, яку версію функції рендерити, на основі поточного користувача або випадково згенерованого прапора.


class FeatureFlag extends React.Component {
  constructor(props) {
    super(props);
    this.state = { enabled: Math.random() < this.props.probability };
  }

  render() {
    return this.props.render(this.state.enabled);
  }
}

function MyComponent() {
  return (
     {
        if (enabled) {
          return 
New Feature!
;
        } else {
          return 
Old Feature
;
        }
      }}
    />
  );
}

Під час A/B-тестування для глобальної аудиторії важливо сегментувати користувачів за мовою, регіоном чи іншими демографічними даними. Компонент FeatureFlag можна змінити, щоб враховувати ці фактори при визначенні версії функції для відображення:


 {
    return isEnabled ?  : ;
  }}
/>

Альтернативи Render Props: Компоненти вищого порядку (HOC) та хуки

Хоча Render Props є потужним патерном, існують альтернативні підходи, які можуть досягти подібних результатів. Дві популярні альтернативи — це компоненти вищого порядку (HOC) та хуки.

Компоненти вищого порядку (HOC)

Компонент вищого порядку (HOC) — це функція, яка приймає компонент як аргумент і повертає новий, розширений компонент. HOC зазвичай використовуються для додавання функціональності або логіки до існуючих компонентів.

Наприклад, HOC withMouse може надати функціональність відстеження миші компоненту:


function withMouse(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { x: 0, y: 0 };
    }

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

    render() {
      return (
        

          
        

      );
    }
  };
}

function MyComponent(props) {
  return (
    
The mouse position is ({props.mouse.x}, {props.mouse.y})

  );
}

const EnhancedComponent = withMouse(MyComponent);

Хоча HOC пропонують повторне використання коду, вони можуть призвести до колізій імен пропсів і ускладнити композицію компонентів, що відомо як "пекло обгорток" (wrapper hell).

Хуки

Хуки React, представлені в React 16.8, надають більш прямий та виразний спосіб повторного використання логіки зі станом між компонентами. Хуки дозволяють вам "підключатися" до стану React та функцій життєвого циклу з функціональних компонентів.

Використовуючи хук useMousePosition, функціональність відстеження миші можна реалізувати наступним чином:


import { useState, useEffect } from 'react';

function useMousePosition() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    function handleMouseMove(event) {
      setMousePosition({ x: event.clientX, y: event.clientY });
    }

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return mousePosition;
}

function MyComponent() {
  const mousePosition = useMousePosition();
  return (
    
The mouse position is ({mousePosition.x}, {mousePosition.y})

  );
}

Хуки пропонують чистіший та більш лаконічний спосіб повторного використання логіки зі станом порівняно з Render Props та HOC. Вони також сприяють кращій читабельності та підтримуваності коду.

Render Props проти хуків: вибір правильного інструменту

Вибір між Render Props та хуками залежить від конкретних вимог вашого проєкту та ваших особистих уподобань. Ось резюме їхніх ключових відмінностей:

Найкращі практики використання Render Props

Щоб ефективно використовувати патерн Render Props, дотримуйтесь наступних найкращих практик:

Висновок

Патерн Render Props — це цінна техніка для створення гнучких та повторно використовуваних компонентів React. Інкапсулюючи логіку та надаючи її компонентам через render prop, ви можете сприяти повторному використанню коду, композиції компонентів та розділенню відповідальності. Хоча хуки пропонують більш сучасну і часто простішу альтернативу, Render Props залишаються потужним інструментом в арсеналі розробника React, особливо при роботі зі застарілим кодом або в сценаріях, що вимагають точного контролю над процесом рендерингу.

Розуміючи переваги та найкращі практики патерну Render Props, ви можете створювати надійні та адаптивні додатки, які задовольняють потреби різноманітної глобальної аудиторії, забезпечуючи послідовний та захоплюючий користувацький досвід у різних регіонах та культурах. Ключовим є вибір правильного патерну — Render Props, HOC або хуки — на основі конкретних потреб вашого проєкту та досвіду вашої команди. Пам'ятайте, що при прийнятті архітектурних рішень завжди слід надавати пріоритет читабельності коду, його підтримуваності та продуктивності.

Патерн Render Props у React: Гнучка логіка компонентів для глобальної аудиторії | MLOG