Context API, как не использовать класс?

См. useContext.

Просто делать

// functional component
const someComponent = () => {
  const BookStoreService = useContext(BookStoreContext);

  // calling a method in the BookStoreService class
  BookStoreService.getBooks();

  return <></>
}

Обратите внимание, что если ваши методы, такие как getBooks(), являются асинхронными (т. е. извлекают данные с сервера), вероятно, лучше всего вызывать их в обработчике побочного эффекта, например useEffect.

Как только наш Context будет готов (глобальные данные для использования в проекте), мы можем использовать useContext() Hook для использования нашего контекста в React-Hooks. Таким образом, мы избегаем компонента на основе класса в нашем приложении.

Мы предоставим пошаговое руководство о том, как работать с Context API в хуках, на примере ниже.

1. Сначала мы создаем наш контекстный файл (в котором будут наши глобальные данные)

import React, { useState, createContext } from "react";

const books = [
  { id: 1, name: "The way of the kings" },
  { id: 2, name: "The people of Paradise" },
  { id: 3, name: "Protest of the Farmers" }
];
// First we need to create our context
const BookContext = createContext();

// createContext returns 2 things. Provider and Consumer. We will only need Provider

const BookContextProvider = ({ children }) => {
  const [books, setBooks] = useState(books);

  const removeBook = (id) => {
    setBooks(books.filter((book) => book.id !== id));
  };

  return (
    <BookContext.Provider value = {{ books, removeBook }}>
      {children}
    </BookContext.Provider>
  );
};

export default BookContextProvider;

Мы использовали метод ContextName.Consumer для создания контекста. Это возвращает (как и раньше хуки) 2 вещи. createContext() и Consumer. Поскольку мы будем работать с хуками, нам понадобится только Provider, а вместо Provider мы будем использовать Consumer в наших компонентах для использования этого контекста.

2. Теперь наш контекст готов. (Примечание: useContext() — это наш BookContext, а Context — это просто компонент, в котором у нас есть данные нашего контекста). Нам нужно будет обернуть весь наш BookContextProvider вокругApp компонента, чтобы все дочерние компоненты, используемые в приложении, имели доступ к глобальному контексту.

    import React, { createContext, useState, useEffect } from "react";
    import "./styles.css";

    import BookContextProvider from "./BookContext";

    export default function App() {
     return (
       <div className = "App">
        <BookContextProvider>
          <BookList/>
        </BookContextProvider>
      </div>
     );
    }
 

Если вы заметили, я использовал компонент BookContextProvder внутри BookList, что связано с настройкой, которую мы сделали в нашем файле BookContextProvider, где мы использовали Context. Итак, {children} Component передается как BookList prop в children Component в нашем BookContextProvider файле. (Новичкам может потребоваться некоторое время, чтобы понять концепцию).

3. Когда все настройки готовы, мы можем использовать контекст в наших дочерних компонентах:

Итак, в моем компоненте BookContext.js я хочу получить доступ к BookList, а также иметь доступ к обработчику books. removeBook

import React, { useContext } from "react";
import { BookContext } from "./BookContext";

const BookList = () => {
  const { books, removeBook } = useContext(BookContext);

  console.info(books); // We have our Books available now
  console.info(removeBook); // We have our removeBook Handler as well
  return (
    <div>
      <h1>BookList Component</h1>
      {books.length > 0 &&
        books.map((book) => {
          return <div key = {book.id}>{book.name}</div>;
        })}
    </div>
  );
};

export default BookList;

В приведенном выше компоненте *We make use of useContext() Hook to do that.* мы теперь потребляем наш контекст. используя BookList крючок.

ПОЛНАЯ ДЕМО-ВЕРСИЯ CODESANDBOX: https://codesandbox.io/s/react-context-and-hooks-vcsfn?file=/src/App.js