React.js 中的 Context API

react jsjavascript libraryfront end technology更新于 2025/11/7 1:16:17

React Context API 在 16.3 或更高版本中可以安全地在生产环境中使用。添加 Context API 的原因是为了避免在存在子组件链的情况下传递 props。

如果不使用 Context API，我们必须将 props 传递到所有中间组件。另一种解决方案是使用第三方库(例如 Redux)来维护中央存储。

理解 props 传递问题

App.js → 书籍 props → BookList.js → 再次将书籍作为 props 传递 → Book.js

随着子组件数量的增加，props 的传递链会不断延伸。

React 借助 context API，提供了一种提供程序消费者方法来解决这个问题。

Creating the context:
BaseContext.js
import React from 'react';
// 这与 Redux 的 createStore 方法相同
const BaseContext = React.createContext();
export default BaseContext;

Create the provider

import BaseContext from './BaseContext';
class BookProvider extends Component {
   state = {
      books: {
         book1: { name: 'React', price: 500 },
         book2: { name: 'Angular', price: 450 }
      }
   };
   render() {
      return (
         <BaseContext.Provider
            value={{
               books: this.state.books,
               incrementPrice: selectedID => {
                  const books = Object.assign({}, this.state.books);
                  books[selectedID].price =books[selectedID].price + 1;
                  this.setState({
                     books
                  });
               },
               decrementPrice: selectedID => {
                  const books = Object.assign({}, this.state.books);
                  books[selectedID].price =books[selectedID].price - 1;
                  this.setState({
                     books
                  });
               }
            }}
         >
         {this.props.children}
         </BaseContext.Provider>
      );
   }
}

App.js

class App extends Component {
   render() {
      return (
         <BookProvider>
            <div className="App">
               <header className="App-header">
                  <h1 className="App-title">Welcome to my book store</h1>
               </header>
               <ProductBookList />
            </div>
         </BookProvider>
      );
   }
}

在子组件中，我们可以使用消费者 −

const Books = () => (
   <BaseContext.Consumer>
      {context => (
         <Fragment>
            <h4>Books:</h4>
            {Object.keys(context.books).map(bookID => (
               <Car
                  key={bookID}
                  name={context.books[bookID].name}
                  price={context.books[bookID].price}
                  incrementPrice={() =>context.incrementPrice(bookID)}
                  decrementPrice={() =>context.decrementPrice(bookID)}
               />
            ))}
         </Fragment>
      )}
   </BaseContext.Consumer>
);

通过使用 context api，我们可以避免在 React 子组件中进行 props 钻取。