Шаблоны проектирования в ReactJS предоставляют стандартизированные и проверенные решения распространенных проблем при разработке приложений. Использование этих шаблонов не только делает ваш код более читабельным и удобным в сопровождении, но также повышает его масштабируемость и надежность. Давайте углубимся в некоторые из самых популярных шаблонов проектирования ReactJS и приведем примеры, иллюстрирующие их использование.

1. Шаблон контейнера и презентационных компонентов

Шаблон «Контейнер и представление» разделяет компоненты на две категории:

• Презентационные компоненты: сосредоточьтесь на том, как все выглядит (пользовательский интерфейс).
• Компоненты контейнера: сосредоточьтесь на том, как все работает (логика и управление состоянием).

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

Пример: презентационные и контейнерные компоненты

// Presentational Component: Displaying User List (UserList.js)
import React from 'react';

const UserList = ({ users }) => (
  

{users.map((user) => (
• {user.name}
))}

// Container Component: Fetching User Data (UserContainer.js)
import React, { useState, useEffect } from 'react';
import UserList from './UserList';

const UserContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
    };
    fetchUsers();
  }, []);

  return ;
};

export default UserContainer;

Здесь UserList — это презентационный компонент, который принимает пользователей в качестве реквизита, а UserContainer занимается извлечением данных и управлением состоянием.

2. Шаблон компонентов высшего порядка (HOC)

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

Пример: создание HOC для авторизации

// withAuthorization.js (HOC for Authorization)
import React from 'react';

const withAuthorization = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      if (!localStorage.getItem('authToken')) {
        // Redirect to login if not authenticated
        window.location.href = '/login';
      }
    }

    render() {
      return ;
    }
  };
};

export default withAuthorization;

// Dashboard.js (Component Wrapped with HOC)
import React from 'react';
import withAuthorization from './withAuthorization';

const Dashboard = () => 
Welcome to the Dashboard
;

export default withAuthorization(Dashboard);

Обертывая Dashboard с помощью withAuthorization, вы гарантируете, что доступ к нему смогут получить только прошедшие проверку подлинности пользователи.

3. Шаблон рендеринга реквизита

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

Пример: использование свойств рендеринга для отслеживания мыши

// MouseTracker.js (Component with Render Props)
import React, { useState } from 'react';

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

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

  return 
{render(position)}
;
};

export default MouseTracker;

// App.js (Using Render Props)
import React from 'react';
import MouseTracker from './MouseTracker';

const App = () => (
   (
      

        Mouse position: ({x}, {y})
      
    )}
  />
);

export default App;

Компонент MouseTracker использует свойство рендеринга для передачи данных о положении мыши любому компоненту, что делает его пригодным для повторного использования.

4. Пользовательский шаблон крючков

Пользовательские хуки позволяют инкапсулировать и повторно использовать логику с сохранением состояния в нескольких компонентах. Этот шаблон способствует повторному использованию кода и четкому разделению задач.

Пример: создание пользовательского перехватчика для получения данных

// useFetch.js (Custom Hook)
import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  }, [url]);

  return { data, loading };
};

export default useFetch;

// App.js (Using the Custom Hook)
import React from 'react';
import useFetch from './useFetch';

const App = () => {
  const { data, loading } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return 
Loading...
;

  return (
    

{data.map((post) => (
• {post.title}
))}

Пользовательский хук useFetch инкапсулирует логику выборки данных, которую можно повторно использовать в разных компонентах.

5. Шаблон составных компонентов

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

Пример: создание вкладок из составных компонентов

// Tabs.js (Parent Component)
import React, { useState } from 'react';

const Tabs = ({ children }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  return React.Children.map(children, (child, index) =>
    React.cloneElement(child, { isActive: index === activeIndex, setActiveIndex, index })
  );
};

const Tab = ({ children, isActive, setActiveIndex, index }) => (
   setActiveIndex(index)}>{children}
);

const TabPanel = ({ children, isActive }) => (isActive ? 
{children}
 : null);

Tabs.Tab = Tab;
Tabs.TabPanel = TabPanel;

export default Tabs;

// App.js (Using Compound Components)
import React from 'react';
import Tabs from './Tabs';

const App = () => (
  Tab 1Tab 2Content for Tab 1Content for Tab 2
);

export default App;

Компонент Tabs управляет состоянием, а компоненты Tab и TabPanel работают вместе, чтобы отображать содержимое вкладок.

6. Шаблон контролируемых и неконтролируемых компонентов

Контролируемые компоненты полностью управляются состоянием React, тогда как неконтролируемые компоненты полагаются на DOM для определения своего состояния. Оба имеют свое применение, но контролируемые компоненты обычно предпочтительнее из-за согласованности и удобства обслуживания.

Пример: контролируемые и неконтролируемые компоненты

// Controlled Component (TextInputControlled.js)
import React, { useState } from 'react';

const TextInputControlled = () => {
  const [value, setValue] = useState('');

  return (
     setValue(e.target.value)} />
  );
};

export default TextInputControlled;

// Uncontrolled Component (TextInputUncontrolled.js)
import React, { useRef } from 'react';

const TextInputUncontrolled = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    
      Log Input Value
    >
  );
};

export default TextInputUncontrolled;

В контролируемых компонентах React полностью контролирует состояние формы, а в неконтролируемых компонентах состоянием управляет сам DOM.

7. Выкройка «Фабрика крючков»

Шаблон «Фабрика хуков» предполагает создание хуков, которые динамически генерируют и управляют несколькими состояниями или поведениями, обеспечивая гибкий способ управления сложной логикой.

Пример: динамическое управление состоянием с помощью фабрики хуков

// useDynamicState.js (Hook Factory)
import { useState } from 'react';

const useDynamicState = (initialStates) => {
  const states = {};
  const setters = {};

  initialStates.forEach(([key, initialValue]) => {
    const [state, setState] = useState(initialValue);
    states[key] = state;
    setters[key] = setState;
  });

  return [states, setters];
};

export default useDynamicState;

// App.js (Using the Hooks Factory)
import React from 'react';
import useDynamicState from './useDynamicState';

const App = () => {
  const [states, setters] = useDynamicState([
    ['name', ''],
    ['age', 0],
  ]);

  return (
    

       setters

.name(e.target.value)}
      />
       setters.age(parseInt(e.target.value))}
      />
      
Name: {states.name}
      
Age: {states.age}
    
  );
};

export default App;

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

Заключение

Используя эти шаблоны проектирования, вы можете создавать приложения React, которые будут более надежными, масштабируемыми и удобными в обслуживании. Эти шаблоны помогут вам написать чистый, многократно используемый код, соответствующий передовым практикам, гарантируя, что ваше приложение со временем будет проще разрабатывать и управлять им.

Хотите ли вы глубже изучить какую-либо из этих закономерностей или изучить другие темы?