React — это популярная библиотека JavaScript для создания пользовательских интерфейсов, а ее простота и гибкость сделали ее предпочтительным выбором для многих разработчиков. Как и в случае любой технологии, существуют определенные шаблоны проектирования, которые доказали свою эффективность при создании хорошо структурированных и удобных в сопровождении приложений React. Вот несколько лучших шаблонов проектирования React, которые стоит изучить в 2023 году:

1. Компоненты контейнера/презентации:

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

import { useState, useEffect } from 'react';

// Presentational Component
function UserList(props) {
  return (
    <ul>
      {props.users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// container components
function UserListContainer() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(users => setUsers(users));
  }, []);

  return <UserList users={users} />;
}

2. Реагировать на крючки:

React Hooks — это новая функция в React 16.8, которая позволяет вам использовать состояние и другие функции React без написания компонента класса. Они просты в использовании и могут помочь вам избежать необходимости в HOC или реквизитах рендеринга в определенных случаях.

import React, { useState } from 'react';

const HooksExample = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default HooksExample;

3. Контекстный API:

Context API — это способ обмена данными в вашем приложении без необходимости детализации свойств. Это позволяет вам создать компонент поставщика, который хранит данные, и компонент потребителя, который получает данные от поставщика. Это может быть особенно полезно для данных, доступ к которым должен осуществляться многими компонентами глубоко в дереве компонентов.

import React, { useContext } from 'react';

// Create a context for the theme
const ThemeContext = React.createContext('light');

const ThemeToggler = () => {
  // Use the useContext hook to retrieve the theme
  const theme = useContext(ThemeContext);
  // Use the useContext hook to retrieve the toggleTheme function
  const toggleTheme = useContext(ThemeContext);

  return (
    <div>
      <p>The current theme is: {theme}</p>
      <button onClick={() => toggleTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light')}>
        Toggle theme
      </button>
    </div>
  );
};

export default ThemeToggler;
import React, { useState } from 'react';
import ThemeToggler from './ThemeToggler';

const App = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = (prevTheme) => {
    setTheme(prevTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <ThemeToggler />
    </ThemeContext.Provider>
  );
};

export default App;

4. Редукс:

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

5. Реагирующий маршрутизатор:

React Router — популярная библиотека для обработки маршрутизации в приложениях React. Это позволяет вам декларативно указывать маршруты в вашем приложении и упрощает навигацию между различными представлениями.

6. Поток и TypeScript:

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

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

Надеюсь, вам понравится 🤗

Удачного кодирования!

хочу дать предложения: -

найди меня в LinkedIn Twitter

Напишите мне на [email protected]