怎樣使用React Context API

翻譯：瘋狂的技術宅

原文：

react context api 現在已經成為乙個實驗性功能，但是只有在 react 16.3.0 中才能用在生產中。本文將向你展示兩個基本的 web 商店應用程式，乙個使用了 context api 進行構建，另乙個則不用。

這個新的api解決了乙個嚴重的問題 ——prop drilling。即使你不熟悉這個術語，如果你曾經用 react.js 做過開發，它可能就已經在你身上發生過了。 prop drilling 是通過將資料傳遞到多個中間 react 元件層，將資料從元件a 獲取到元件 z 的過程。元件將間接的接收props，而你必須確保一切正常。

我們先**如何在沒有 react context api 的情況下處理常見問題：

state = ,

car002: ,

car003: }};

incrementcarprice = this.incrementcarprice.bind(this);

decrementcarprice = this.decrementcarprice.bind(this);

incrementcarprice(selectedid) , this.state.cars);

cars[selectedid].price = cars[selectedid].price + 1;

this.setstate();

}decrementcarprice(selectedid) , this.state.cars);

cars[selectedid].price = cars[selectedid].price - 1;

this.setstate();

}render()

);}}

productlist .js

const productlist = props => (
);export default productlist;

cars.js

const cars = props => (
cars:
decrementprice=
/>
))});

car.js

const cars = props => (
name: 
price: $↑↓
);

當然，這不是處理資料的最好方式，但我希望能夠用它說明為什麼prop drilling 很差勁。那麼 context api 是如何幫我們避免這種情況呢？

讓我們重構程式並演示它可以做些什麼。簡而言之，context api 允許你擁有乙個儲存資料的**儲存（是的，就像儲存在 redux 中一樣）。你可以把任何元件直接插入到商店應用中，也可以切斷 middleman！

重構非常簡單 —— 我們不必對元件的結構進行任何修改。但是我們確實需要建立一些新元件：provider 和 consumer。

首先，我們需要建立context，後面可以使用它來建立 provider 和 consumer。

mycontext.js

import react from 'react';
// this is the equivalent to the createstore method of redux
// const mycontext = react.createcontext();
export default mycontext;

完成後，我們可以匯入 context 並用它來建立我們的 provider，我們稱之為 myprovider。在裡面使用一些值初始化乙個狀態，你可以通過valueprop 共享我們的 provider 元件。在例子中，我們將共享this.state.cars以及一些操縱狀態的方法。將這些方法可以看作是 redux 中的 reducer。

myprovider.js

import mycontext from './mycontext';
class myprovider extends component ,
car002: ,
car003: }};
render() , this.state.cars);
cars[selectedid].price = cars[selectedid].price + 1;
this.setstate();
},decrementprice: selectedid => , this.state.cars);
cars[selectedid].price = cars[selectedid].price - 1;
this.setstate();}}}
>);}
}

為了使 provider 可以訪問其他元件，我們需要用它包裝我們的應用程式（沒錯，就像 redux 一樣）。我們可以擺脫這些狀態和方法，因為它們在 myprovider.js 中定義。

render()

}我們需要再次匯入 context 並用它包裝我們的元件，它會在元件中注入context 引數。之後，它非常直接。你使用context就像用props一樣。它包含我們在 myproducer 中共享的所有值，我們所需要做的只是去使用它！

cars.js

const cars = () => (
decrementprice=
/>
))})}
);

我們似乎忘記了什麼？是 productlist ！它使好處變得非常明顯。我們不必傳遞任何資料或方法。這個元件被簡化，因為它只需要去渲染一些元件。

productlist.js

const productlist = () => (
);

在本文中，我對 redux 和 context api 進行了一些比較。 redux 最大的優勢之一就是你的應用可以擁有乙個可以從任何元件訪問的**儲存。而使用新的 context api，預設情況下你已經有了這個功能。在巨大的宣傳攻勢下 context api 將會使 redux 變得過時。

對於那些只把 redux 作為**儲存功能的人來說，可能確實如此。如果你只使用 redux 的這乙個功能，現在可以使用 context api 替換它，並避免在不使用第三方庫的情況下進行 prop drilling。

怎樣使用React Context API

怎樣使用this

怎樣使用ArrayAdapter

怎樣使用React Context API

怎樣使用React Context API

怎樣使用this

怎樣使用ArrayAdapter

怎樣使用React Context API

相關推薦