怎樣使用React Context API

2021-09-12 17:01:13 字數 3506 閱讀 2602

翻譯：瘋狂的技術宅

原文：

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。

怎樣使用this

關於js裡面有哪些難點，艹，js裡面全是難點。什麼閉包，原型，函式，物件，型別檢測，this。但是作為一名正統的前端愛好者而言 這點痛算什麼。今天我們來解決this這個點。由於牽扯到this，則必定會牽扯到函式，因為沒有函式就沒有this的存在的意思。話不多說，cut 1.作為物件的方法呼叫 2.作...

怎樣使用ArrayAdapter

學android的人都知道 adapter 介面卡 是很重要的 介面卡是listview和資料來源之間的橋梁 介面卡有 arrayadapter baseadapter adapter 這章先來介紹一下arrayadapter 構建乙個布局listview 在mainactivity中加入 priv...

怎樣使用React Context API

翻譯 瘋狂的技術宅 原文 react context api 現在已經成為乙個實驗性功能，但是只有在 react 16.3.0 中才能用在生產中。本文將向你展示兩個基本的 web 商店應用程式，乙個使用了 context api 進行構建，另乙個則不用。這個新的api解決了乙個嚴重的問題 prop ...