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.
Надеюсь, вам понравится 🤗
Удачного кодирования!
хочу дать предложения: -
Напишите мне на [email protected]