摘要：翻譯瘋狂的技術(shù)宅原文本文首發(fā)微信公眾號歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章現(xiàn)在已經(jīng)成為一個實驗性功能，但是只有在中才能用在生產(chǎn)中。創(chuàng)建完成后，我們可以導(dǎo)入并用它來創(chuàng)建我們的，我們稱之為。在巨大的宣傳攻勢下將會使變得過時。

翻譯：瘋狂的技術(shù)宅
原文：https://www.toptal.com/react/...

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

React Context API 現(xiàn)在已經(jīng)成為一個實驗性功能，但是只有在 React 16.3.0 中才能用在生產(chǎn)中。本文將向你展示兩個基本的 Web 商店應(yīng)用程序，一個使用了 Context API 進行構(gòu)建，另一個則不用。

這個新的API解決了一個嚴重的問題 ——prop drilling。 即使你不熟悉這個術(shù)語，如果你曾經(jīng)用 React.js 做過開發(fā)，它可能就已經(jīng)在你身上發(fā)生過了。 Prop drilling 是通過將數(shù)據(jù)傳遞到多個中間 React 組件層，將數(shù)據(jù)從組件A 獲取到組件 Z 的過程。 組件將間接的接收props，而你必須確保一切正常。

我們先探討如何在沒有 React Context API 的情況下處理常見問題：

App.js

class App extends Component {
    state = {
        cars: {
            car001: { name: "Honda", price: 100 },
            car002: { name: "BMW", price: 150 },
            car003: { name: "Mercedes", price: 200 }
        }
    };
    incrementCarPrice = this.incrementCarPrice.bind(this);
    decrementCarPrice = this.decrementCarPrice.bind(this);

    incrementCarPrice(selectedID) {
        // a simple method that manipulates the state
        const cars = Object.assign({}, this.state.cars);
        cars[selectedID].price = cars[selectedID].price + 1;
        this.setState({
            cars
        });
    }

    decrementCarPrice(selectedID) {
        // a simple method that manipulates the state
        const cars = Object.assign({}, this.state.cars);
        cars[selectedID].price = cars[selectedID].price - 1;
        this.setState({
            cars
        });
    }

    render() {
        return (
            

                

                    
                    
Welcome to my web store
                
                {/* Pass props twice */}
                
            
        );
    }
}

ProductList .js

const ProductList = props => (
    

        
Product list:
        {/* Pass props twice */}
        
        {/* Other potential product categories which we will skip for this demo: */}
        {/*  */}
        {/*  */}
        {/*  */}
    
);

export default ProductList;

Cars.js

const Cars = props => (
    
        
Cars:
        {/* Finally we can use data */}
        {Object.keys(props.cars).map(carID => (
             props.incrementCarPrice(carID)}
                decrementPrice={() => props.decrementCarPrice(carID)}
            />
        ))}
    
);

Car.js

const Cars = props => (
    
        
Name: {props.name}
        
Price: ${props.price}
        ↑
        ↓
    
);

當(dāng)然，這不是處理數(shù)據(jù)的最好方式，但我希望能夠用它說明為什么 prop drilling 很差勁。 那么 Context API 是如何幫我們避免這種情況呢？

讓我們重構(gòu)程序并演示它可以做些什么。 簡而言之，Context API 允許你擁有一個存儲數(shù)據(jù)的中央存儲（是的，就像存儲在 Redux 中一樣）。你可以把任何組件直接插入到商店應(yīng)用中，也可以切斷 middleman！

重構(gòu)非常簡單 —— 我們不必對組件的結(jié)構(gòu)進行任何修改。但是我們確實需要創(chuàng)建一些新組件：Provider 和 consumer。

首先，我們需要創(chuàng)建context，后面可以使用它來創(chuàng)建 Provider 和 consumer。

MyContext.js

import React from "react";

// this is the equivalent to the createStore method of Redux
// https://redux.js.org/api/createstore

const MyContext = React.createContext();

export default MyContext;

完成后，我們可以導(dǎo)入 context 并用它來創(chuàng)建我們的 provider，我們稱之為 MyProvider。在里面使用一些值初始化一個狀態(tài)，你可以通過 value prop 共享我們的 provider 組件。 在例子中，我們將共享 this.state.cars 以及一些操縱狀態(tài)的方法。 將這些方法可以看作是 Redux 中的 Reducer。

MyProvider.js

import MyContext from "./MyContext";

class MyProvider extends Component {
    state = {
        cars: {
            car001: { name: "Honda", price: 100 },
            car002: { name: "BMW", price: 150 },
            car003: { name: "Mercedes", price: 200 }
        }
    };

    render() {
        return (
             {
                        const cars = Object.assign({}, this.state.cars);
                        cars[selectedID].price = cars[selectedID].price + 1;
                        this.setState({
                            cars
                        });
                    },
                    decrementPrice: selectedID => {
                        const cars = Object.assign({}, this.state.cars);
                        cars[selectedID].price = cars[selectedID].price - 1;
                        this.setState({
                            cars
                        });
                    }
                }}
            >
                {this.props.children}
            
        );
    }
}

為了使 provider 可以訪問其他組件，我們需要用它包裝我們的應(yīng)用程序（沒錯，就像 Redux 一樣）。我們可以擺脫這些狀態(tài)和方法，因為它們在 MyProvider.js 中定義。

App.js

class App extends Component {
    render() {
        return (
            
                

                    

                        
                        
Welcome to my web store
                    
                    
                
            
        );
    }
}

我們需要再次導(dǎo)入 context 并用它包裝我們的組件，它會在組件中注入context 參數(shù)。 之后，它非常直接。 你使用 context 就像用 props 一樣。 它包含我們在 MyProducer 中共享的所有值，我們所需要做的只是去使用它！

Cars.js

const Cars = () => (
    
        {context => (
            
                
Cars:
                {Object.keys(context.cars).map(carID => (
                     context.incrementPrice(carID)}
                        decrementPrice={() => context.decrementPrice(carID)}
                    />
                ))}
            
        )}
    
);

我們似乎忘記了什么？是 ProductList ！它使好處變得非常明顯。 我們不必傳遞任何數(shù)據(jù)或方法。這個組件被簡化，因為它只需要去渲染一些組件。

ProductList.js

const ProductList = () => (
    

        
Product list:
        
        {/* Other potential product categories which we will skip for this demo: */}
        {/*  */}
        {/*  */}
        {/*  */}
    
);

在本文中，我對 Redux 和 Context API 進行了一些比較。 Redux 最大的優(yōu)勢之一就是你的應(yīng)用可以擁有一個可以從任何組件訪問的中央存儲。而使用新的 Context API，默認情況下你已經(jīng)有了這個功能。 在巨大的宣傳攻勢下 Context API 將會使 Redux 變得過時。

對于那些只把 Redux 作為中央存儲功能的人來說，可能確實如此。 如果你只使用 Redux 的這一個功能，現(xiàn)在可以使用 Context API 替換它，并避免在不使用第三方庫的情況下進行 prop drilling。

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章