React Context API

  使用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(<App />, document.getElementById('root'));

  先不用context,把它实现一下,在src 目录下建Cars.js, ProductList.js和 Total.js 文件

import React, { Fragment } from "react";

export const Cars = props => (
    <Fragment>
        <h4>Cars:</h4>
        <table className="table table-bordered">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Price</th>
                    <th scope="col">action</th>
                </tr>
            </thead>
            <tbody>
                {/* Finally we can use data */}
                {Object.keys(props.cars).map(carID => (
                    <tr key={carID}>
                        <td>{props.cars[carID].name}</td>
                        <td>${props.cars[carID].price}</td>
                        <td>
                            <button className="btn btn-primary" onClick={() => props.incrementCarPrice(carID)}>&uarr;</button> &nbsp;
                            <button className="btn btn-primary" onClick={() => props.decrementCarPrice(carID)}>&darr;</button>
                        </td>
                    </tr>
                ))}
            </tbody>
        </table>
    </Fragment>
);
import React from "react";
import { Cars } from "./Cars";

export const ProductList = props => (
    <Cars
        cars={props.cars}
        incrementCarPrice={props.incrementCarPrice}
        decrementCarPrice={props.decrementCarPrice}
    />
);
import React from 'react';

export const Total = props => {
    const { cars } = props;
    return (
        <button type="button" class="btn btn-primary btn-lg btn-block">
            Total: &nbsp;
        {
                Object.keys(cars).reduce((sum, car) => {
                    return sum + cars[car].price
                }, 0)
            }
        </button>
    )
}

  把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 (
            <div style={{width: '1000px', margin: '50px auto'}}>
                <ProductList
                    cars={this.state.cars}
                    incrementCarPrice={this.incrementCarPrice}
                    decrementCarPrice={this.decrementCarPrice}
                />
                <Total  cars={this.state.cars}></Total>
            </div>
        );
    }
}

  可以看到真正使用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 内容修改如下
 <div style={{width: '1000px', margin: '50px auto'}}>
    <CarContext.Provider value={{cars: this.state.cars}}>
        <ProductList
            incrementCarPrice={this.incrementCarPrice}
            decrementCarPrice={this.decrementCarPrice}
        />
    </CarContext.Provider>
    <Total  cars={this.state.cars}></Total>
  </div>

  最后就是修改Cars组件来消费共享数据,使用Consumer 组件。相比Provider 组件,它的使用稍微有一点麻烦,它不是把Cars组件原来的内容包起来,而是使用函数表达式。Consumer 组件的内容是一个函数表达式,函数的参数,就是Consumer 组件帮我们注入到Cars组件中的共享数据,返回的内容就是Cars 原有的内容,它这时就可以直接使用共享数据了。

import React, { Fragment } from "react";
import { CarContext } from "./CarContext";

export const Cars = props => (
    <CarContext.Consumer>
        {/* contextData 就是共享数据 */}
        {contextData => {
            const {cars} = contextData;
            return <Fragment>
                <h4>Cars:</h4>
                <table className="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Price</th>
                            <th scope="col">action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* Finally we can use data */}
                        {Object.keys(cars).map(carID => (
                            <tr key={carID}>
                                <td>{cars[carID].name}</td>
                                <td>${cars[carID].price}</td>
                                <td>
                                    <button className="btn btn-primary" onClick={() => props.incrementCarPrice(carID)}>&uarr;</button> &nbsp;
                                    <button className="btn btn-primary" onClick={() => props.decrementCarPrice(carID)}>&darr;</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </Fragment>
        }}
        
    </CarContext.Consumer>
);

  有时候,修改共享数据的方法也需要共享,假设在Total 中也可以更改app的state,那么incrementCarPrice 和decrementCarPrice 就要共享, 那么 CarContext.Provider 组件的value 属性就要包含这两个方法

 <div style={{width: '1000px', margin: '50px auto'}}>
     <CarContext.Provider value={
          {cars: this.state.cars, incrementCarPrice: this.incrementCarPrice, decrementCarPrice: this.decrementCarPrice}
     }>
         <ProductList/>
     </CarContext.Provider>
     <Total  cars={this.state.cars}></Total>
</div>

  最好也在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 => (
    <CarContext.Consumer>
        {/* contextData 就是共享数据 */}
        {contextData => {
            const {cars, incrementCarPrice, decrementCarPrice} = contextData;
            return <Fragment>
                <h4>Cars:</h4>
                <table className="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Price</th>
                            <th scope="col">action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* Finally we can use data */}
                        {Object.keys(cars).map(carID => (
                            <tr key={carID}>
                                <td>{cars[carID].name}</td>
                                <td>${cars[carID].price}</td>
                                <td>
                                    <button className="btn btn-primary" onClick={() => incrementCarPrice(carID)}>&uarr;</button> &nbsp;
                                    <button className="btn btn-primary" onClick={() => decrementCarPrice(carID)}>&darr;</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </Fragment>
        }}
        
    </CarContext.Consumer>
);

   由于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 (
            <Fragment>
                <h4>Cars:</h4>
                <table className="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Price</th>
                            <th scope="col">action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* Finally we can use data */}
                        {Object.keys(cars).map(carID => (
                            <tr key={carID}>
                                <td>{cars[carID].name}</td>
                                <td>${cars[carID].price}</td>
                                <td>
                                    <button className="btn btn-primary" onClick={() => incrementCarPrice(carID)}>&uarr;</button> &nbsp;
                                                <button className="btn btn-primary" onClick={() => decrementCarPrice(carID)}>&darr;</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </Fragment>
        )
    }
}

  但为了这一个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 <Fragment>
        <h4>Cars:</h4>
        <table className="table table-bordered">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Price</th>
                    <th scope="col">action</th>
                </tr>
            </thead>
            <tbody>
                {/* Finally we can use data */}
                {Object.keys(cars).map(carID => (
                    <tr key={carID}>
                        <td>{cars[carID].name}</td>
                        <td>${cars[carID].price}</td>
                        <td>
                            <button className="btn btn-primary" onClick={() => incrementCarPrice(carID)}>&uarr;</button> &nbsp;
                            <button className="btn btn-primary" onClick={() => decrementCarPrice(carID)}>&darr;</button>
                        </td>
                    </tr>
                ))}
            </tbody>
        </table>
    </Fragment>
};

  这时ProductList 组件就可以不用传递任何数据了

export const ProductList = props => (
    <Cars/>
);

  但如果仅仅是为了不想层层伟递数据,就使用context,那没有必要,那可以传递组件。在父组件中声明要传递的组件,直接把组件传递过去。经过的子组件以数据并没有感知。

posted @ 2019-08-23 08:40  SamWeb  阅读(301)  评论(0编辑  收藏