javascript - 上下文 API，如何不使用类？

Question

如何使用功能组件和钩子(Hook)在所有组件中制作和获取 Prop ？
例如，我正在制作一个带有类的 js 文件，其中包含 getBooks()、getNotes() 等函数，然后我制作一个上下文文件并将其导入 index.js 并使用一个类作为提供程序值，如下所示。

import {BookStoreContext} from "./components/bookstore-service-context";
import {BookStoreService} from "./services";

const bookStoreService = new BookStoreService();

ReactDOM.render(
    <Provider store={store}>
        <ErrorBoundry>
            <BookStoreContext.Provider value={BookStoreService}>
    <BrowserRouter>
    <App/>
    </BrowserRouter>
            </BookStoreContext.Provider>
        </ErrorBoundry>
    </Provider>,
    document.getElementById('root')
);

Answer 1

一旦我们的Context准备好了(项目中要使用的全局数据)。我们可以使用useContext() Hook 在 React-Hooks 中使用我们的上下文。这样我们就避免了基于类的 ContextName.Consumer我们应用程序中的组件。
将通过以下示例提供有关如何在 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;

我们使用了 createContext()方法来创建我们的上下文。这会返回(和 Hooks 之前一样)两件事。 Consumer和 Provider .由于我们将使用 Hooks，因此我们只需要 Provider代替 Consumer , 我们将使用 useContext()在我们的组件中使用这个上下文。
2. 我们的 Context 现在已经准备好了。 ( 注意: BookContext 是我们的 Context 和 BookContextProvider 只是我们拥有上下文数据的组件)。我们需要包装整个 App约 BookContextProvder组件，以便应用程序中使用的所有子组件都可以访问全局上下文。

    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>
     );
    }
 

如果您注意到，我使用了 BookList BookContextProvider 内的组件，这与我们在 Context 中所做的设置有关文件，我们在这里使用了 {children} .所以， BookList组件作为 children 传递支持 BookContextProvider我们的 BookContext.js 中的组件文件。 (新手可能需要一些时间来掌握这个概念)。
3. 一旦所有设置准备就绪，我们就可以在子组件 中使用上下文:
所以在我的 BookList组件，我要访问 books并且还可以访问 removeBook处理程序。 *We make use of useContext() Hook to do that.*

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

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

  console.log(books); // We have our Books available now
  console.log(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;

In the above BookList Component we are now consuming our Contextusing useContext() Hook.

完整的 CODESANDBOX 演示: https://codesandbox.io/s/react-context-and-hooks-vcsfn?file=/src/App.js