React.js中的上下文API

React上下文api在版本16.3或最新版本中可以安全地用于生产中。添加上下文api的原因是，如果有一系列子组件，则避免传递prop。

在不使用上下文api的情况下，我们必须将道具传递给所有中间组件。另一种替代解决方案是使用第三方库（例如Redux）来维护中央存储。

了解道具传递问题

App.js→书籍道具→BookList.js→再次将书籍作为道具→Book.js

随着子组件数量的增加，传递道具的链条继续进行。

使用上下文api，React提供了一种提供方使用者方法来解决此问题。

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

创建提供者

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子组件中钻取道具。