Современная разработка веб-приложений: практическое руководство по использованию фреймворков. Разработчик

товаров</h1>

      <ul>

      {goods.map((good) => (

      <li key={good.id}>{good.name}</li>

      ))}

      </ul>

      <button onClick={handleAddGood}>Добавить товар</button>

      </div>

      );

      };

      export default GoodsList;

      ```

      В этом примере мы создали компонент `GoodsList`, который отображает список товаров и позволяет пользователю добавлять новые товары. Мы используем hook `useState` для управления состоянием компонента, которое представлено в виде массива товаров. Когда пользователь нажимает кнопку "Добавить товар", обновляем состояние добавляя новый товар массив.

      Вывод

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

      2.3. Использование Hooks и Context API

      В предыдущих главах мы рассмотрели основы React и его компоненты. Теперь давайте поговорим о двух мощных инструментах, которые позволяют создавать более сложные масштабируемые приложения: Hooks Context API.

      Что такое Hooks?

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

      Hooks предоставляют несколько преимуществ:

      Упрощение кода: Hooks позволяют писать более простой и читаемый код, избегая необходимости создавать классовые компоненты.

      Улучшение производительности: Hooks могут улучшить производительность приложения, уменьшая количество перерисовок и обновлений компонентов.

      Увеличение гибкости: Hooks позволяют использовать состояние и другие функции React в функциональных компонентах, что делает их более гибкими удобными использовании.

      Основные Hooks

      React предоставляет несколько основных Hooks, которые можно использовать в своих приложениях:

      useState: Позволяет использовать состояние в функциональных компонентах.

      useEffect: Позволяет выполнять побочные эффекты, такие как запросы к API или обновления DOM, после перерисовки компонента.

      useContext: Позволяет использовать Context API в функциональных компонентах.

      useReducer: Позволяет использовать reducer-функции для управления состоянием в функциональных компонентах.

      useCallback: Позволяет мемоизировать функции, чтобы избежать их повторного создания при перерисовке компонента.

      useMemo: Позволяет мемоизировать значения, чтобы избежать их повторного вычисления при перерисовке компонента.

      Context API

      Context API – это механизм, который позволяет делиться данными между компонентами без необходимости передавать их через props. Он особенно полезен для управления состоянием и темами в приложении.