使用React 开发程序的时候，组件中的数据共享是通过数据提升，变成父组件中的属性，然后再把属性向下传递给子组件来实现的。但当程序越来越复杂，需要共享的数据也越来越多，最后可能就把共享数据直接提升到最外层的组件，这时子组件再想获取到共享数据就有点麻烦了，需要向下传递好多层才能到达想要数据的子组件，这就很容易产生了一个问题，由于经过的这些层（组件）可能不需要这个数据，向下传递的过程中，有可能就忘记写共享属性了，程序就会出错，并且还不好调试。有没有一种方法，可以穿透组件，想要数据的子组件直接就能获取到共享数据， 这就是React context。
Context就是上下文，环境的意思，React 的context 就是提供了一个上下文或环境，在这个环境中，有context提供者和context消费者，提供者(provider) 提供共享数据，消费者(consumer) 消费这些共享数据。所以使用React Context 的Api时，首先要先创建一个context, 假设是proContext, 创建成功后，这个proContext 就有两个属性provider和consumer，它们是两个组件，分别就是提供者和消费者，提供者提供数据是通过组件的value属性实现的, 消费者消费数据是通过函数实现了， 消费者怎么获取到提供者提供的数据呢？都是组件吗，只要消费者是提供者的子组件，它就是能获取到数据，这也就避免了层层传递。
说起来，可能不好说，写一下代码就清楚了。打开cmd命令窗口, create-react-app react-context，创建项目 react-context，项目很非常简单，如下所示
点击每个项目的上下箭头，改变total, 为了更能体现context 的用法，我把列表中的数据做成了共享数据，放到了最外层的父组件中。 项目要使用boostrap 提供样式，cd react-context && npm install bootstrap --save, 安装它。使用vs code 编辑器打开项目， 在index.js中引入bootstrap css 样式
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import 'bootstrap/dist/css/bootstrap.css'; // 添加bootstrap 样式ReactDOM.render(, document.getElementById('root'));
先不用context，把它实现一下，在src 目录下建Cars.js, ProductList.js和 Total.js 文件
import React, { Fragment } from "react";export const Cars = props => ( Cars:
Name Price action { /* Finally we can use data */} {Object.keys(props.cars).map(carID => ( {props.cars[carID].name} ${props.cars[carID].price} ))}
); import React from "react";import { Cars } from "./Cars";export const ProductList = props => ( import React from 'react';export const Total = props => { const { cars } = props; return ( )} 把App.js 修改如下
import React, { Component } from "react";import { ProductList } from "./ProductList";import { Total } from "./Total";export default class App extends Component { state = { cars: { car001: { name: 'Honda', price: 100 }, car002: { name: 'BMW', price: 150 }, car003: { name: 'Mercedes', price: 200 } } }; incrementCarPrice = (selectedID) => { const cars = Object.assign({}, this.state.cars); cars[selectedID].price = cars[selectedID].price + 1; this.setState({ cars }); } decrementCarPrice = (selectedID) => { const cars = Object.assign({}, this.state.cars); cars[selectedID].price = cars[selectedID].price - 1; this.setState({ cars }); } render() { return ( 可以看到真正使用App组件中共享state的是组件Cars，ProductList组件根本没有使用。但是由于Cars 组件不是App组件的子组件，所以需要经过ProductList 组件进行传递，ProductList 组件也不得不接收和传递它自己不需要的属性，造成了代码的冗余。这正是Context 解决的问题。现在使用context 解决一下。
按照上面所说，首先要创建一个context, 使用的是React.createContext() 方法，它接受一个可选的参数，就是共享内容的默认值，我们要共享什么，就在这里定义好，提供默认值，当然也可以不传，直接调用.createContext() 方法。不过，建议写上参数，把它看作是共享内容的格式定义，一看到这个context, 就知道要共享什么。那创建的context 放在什么地方呢？context 可以定义在任意位置，在src 目录下新建一个文件CarContext.js 来存放context.
import React from 'react';// 共享的数据是一个对象，有一个属性cars, 默认值是空对象export const CarContext = React.createContext({ cars: {}}) 创建一个provider 来提供真正的共享数据，使用的是CarContext.Provider 组件。它放到什么地方呢？因为共享的数据是App中的state, 而且需要消费数据的是ProductList 组件中的Car， 所以要在App.js 中引入CarContext， 并使用CarContext.Provider 把ProductList 组件包起来，这样ProductList 及其子组件就是获取到共享数据， 共享数据又是怎么提供呢？CarContext.Provider 有一个value 属性，所有共享的内容都放到value属性中。这样productList 就可以不用传递cars 属性了，把它去掉
import { CarContext } from "./CarContext"; // app.js 顶部引入 .... // render 内容修改如下 最后就是修改Cars组件来消费共享数据，使用Consumer 组件。相比Provider 组件，它的使用稍微有一点麻烦，它不是把Cars组件原来的内容包起来，而是使用函数表达式。Consumer 组件的内容是一个函数表达式，函数的参数，就是Consumer 组件帮我们注入到Cars组件中的共享数据，返回的内容就是Cars 原有的内容，它这时就可以直接使用共享数据了。
import React, { Fragment } from "react";import { CarContext } from "./CarContext";export const Cars = props => ( { /* contextData 就是共享数据 */} {contextData => { const {cars} = contextData; return Cars:
Name Price action { /* Finally we can use data */} {Object.keys(cars).map(carID => ( {cars[carID].name} ${cars[carID].price} ))}
}} ); 有时候，修改共享数据的方法也需要共享，假设在Total 中也可以更改app的state，那么incrementCarPrice 和decrementCarPrice 就要共享, 那么 CarContext.Provider 组件的value 属性就要包含这两个方法
最好也在carCotext 中提供这两个方法的默认实现，carContext.js 修改如下：
export const CarContext = React.createContext({ cars: {}, incrementCarPrice: () => {}, decrementCarPrice: () => {}}) Cars 消费组件，调用incrementCarPrice 和decrementCarPrice， 就要从共享数据contextData 中获取
import React, { Fragment } from "react";import { CarContext } from "./CarContext";export const Cars = props => ( { /* contextData 就是共享数据 */} {contextData => { const {cars, incrementCarPrice, decrementCarPrice} = contextData; return Cars:
Name Price action { /* Finally we can use data */} {Object.keys(cars).map(carID => ( {cars[carID].name} ${cars[carID].price} ))}
}} ); 由于Consumer 组件使用起来相对麻烦一点，所以React也提供了简便方法，可以给消费组件设一个静态属性contextType, 值为CarContext , 然后组件内就可以通过this.context 来获取到context 共享数据，而不用使用Consumer 组件包括。 静态属性，可以直接给消费组件类赋值一个属性，Car.contextType = CarContext , 或者在类中使用static 修饰 static contextType = CarContext , 这时要把组件变成类组件
import React, { Fragment } from "react";import { CarContext } from "./CarContext";export class Cars extends React.Component{ static contextType = CarContext; render() { const {cars, incrementCarPrice, decrementCarPrice} = this.context; return ( Cars:
Name Price action { /* Finally we can use data */} {Object.keys(cars).map(carID => ( {cars[carID].name} ${cars[carID].price} ))}
) }} 但为了这一个context ，改成类组件，也不是很爽，如果你的React 版本是16.8 及以上，你可以使用React Hook， useContext
import React, { Fragment, useContext } from "react";import { CarContext } from "./CarContext";export const Cars = () => { const {cars, incrementCarPrice, decrementCarPrice} = useContext(CarContext); return Cars:
Name Price action { /* Finally we can use data */} {Object.keys(cars).map(carID => ( {cars[carID].name} ${cars[carID].price} ))}
}; 这时ProductList 组件就可以不用传递任何数据了
export const ProductList = props => ();
但如果仅仅是为了不想层层伟递数据，就使用context，那没有必要，那可以传递组件。在父组件中声明要传递的组件，直接把组件传递过去。经过的子组件以数据并没有感知。