React?Context用法小結(jié)(附完整代碼)
更新時間：2023年04月24日 15:49:28 作者：成續(xù)源
這篇文章主要介紹了React?Context用法小結(jié)(附完整代碼),Context提供了一種新的組件之間共享數(shù)據(jù)的方式，允許數(shù)據(jù)隔代傳遞，而不必顯式的通過組件樹逐層傳遞props，本文通過示例代碼介紹的非常詳細，需要的朋友可以參考下
前言
傳統(tǒng)的React應(yīng)用中，數(shù)據(jù)通過props屬性自上而下(由父組件向子組件)傳遞，當組件層級數(shù)量增多時，在每一層傳遞props則很繁瑣，Context提供了一種新的組件之間共享數(shù)據(jù)的方式，允許數(shù)據(jù)隔代傳遞，而不必顯式的通過組件樹逐層傳遞props。
根據(jù)官網(wǎng)鏈接對Context常用的5種使用場景進行了整理，并隨文配上完整代碼。
使用場景：
- 父組件使用Provider生產(chǎn)數(shù)據(jù)，子組件使用Consumer消費數(shù)據(jù)
- 子組件使用ContextType接收數(shù)據(jù)
- 動態(tài)和靜態(tài)Context(父組件更新Context，被Provider包裹的子組件刷新數(shù)據(jù)，沒被Provider包裹的子組件使用Context默認值)
- 在嵌套組件中更新Context(子組件通過Context傳遞的函數(shù)更新數(shù)據(jù))
- 消費多個Context
知識點匯總
- 首先創(chuàng)建1個Context對象，當React渲染1個訂閱了Context對象的組件，這個組件會從組件樹中離自身最近的那個匹配的Provider讀取到當前的context值。
- 每個Context都返回1個React組件，允許消費組件訂閱context的變化
- ContextType只能在類組件中使用
- 1個組件如果有多個消費者，ContextType支隊其中1個有效，也就是ContextType只能有1個（所以推薦使用Provider和Consumer形式）
場景1：使用Provider和Consumer生產(chǎn)和消費數(shù)據(jù) 文件目錄及說明
以下文件在同級路徑：
- ProductContext.js：創(chuàng)建的Context組件文件
- ProviderPage.js：父組件(數(shù)據(jù)生產(chǎn)者)
- MiddlePage.js：中間組件
- ConsumerPage.js：子組件(數(shù)據(jù)消費者)
數(shù)據(jù)傳遞路徑：
ProviderPage.js ==> MiddlePage.js ==> ConsumerPage.js
代碼文件 ProductContext.js:
import React from 'react';
// Context 可以讓我們無須明確地傳遍每一個組件，就能將值深入傳遞進組件樹。
// 創(chuàng)建1個Context對象并給定默認值，如果沒有匹配到Provider，消費組件取Context默認值
export const ProductContext = React.createContext({
name: 'car',
price: 8000,
unit: '$',
});
export const { Provider, Consumer } = ProductContext;ProviderPage.js:
import React, { PureComponent } from 'react';
import MiddlePage from './MiddlePage';
import { Provider } from './ProductContext';
class ProviderPage extends PureComponent {
state = {
product: {
name: 'plane',
price: 120000,
unit: '$',
},
};
render() {
const { product } = this.state;
return (
<div>
<h1>根組件使用Provider傳值，子組件使用Consumer接收</h1>
<Provider value={product}>
<MiddlePage />
</Provider>
{/*不用Provider，顯示Context對象defaultValue*/}
{/* <MiddlePage />*/}
</div>
);
}
}
export default ProviderPage;
MiddlePage.js:
import React, { PureComponent } from 'react';
import ConsumerPage from './ConsumerPage';
class MiddlePage extends PureComponent {
render() {
return (
<ConsumerPage />
);
}
}
export default MiddlePage;ConsumerPage.js:
import React, { PureComponent } from 'react';
import { Consumer } from './ProductContext';
class ConsumerPage extends PureComponent {
render() {
return (
<Consumer>
{context => {
return (
<div>
name:{context.name}
<br />
price:{context.price}
<br />
unit:{context.unit}
</div>
);
}}
</Consumer>
);
}
}
export default ConsumerPage;效果
可以看到顯示的是ProviderPage組件提供的Context值。
場景2：使用ContextType接收數(shù)據(jù)
文件目錄及說明
- FamilyContext.js：創(chuàng)建的Context組件
- FatherPage.js：父組件(生產(chǎn)數(shù)據(jù))
- SonPage.js：子組件(中間組件)
- GrandSonPage.js：孫組件(消費數(shù)據(jù))
代碼文件
FamilyContext.js
import React, { PureComponent } from 'react';
import SonPage from './SonPage';
import { Provider } from './FamilyContext';
class FatherPage extends PureComponent {
state = {
person: {
name: 'Lora',
age: 99,
gender: 'female',
},
};
render() {
const { person } = this.state;
return (
<div>
<h1>使用ContextType消費Context數(shù)據(jù)</h1>
<Provider value={person}>
<SonPage />
</Provider>
{/*不用Provider，顯示Context對象defaultValue*/}
{/*<SonPage />*/}
</div>
);
}
}
export default FatherPage;
SonPage.js：和上面的MiddlePage.js一樣
import React, { PureComponent } from 'react';
import GrandSonPage from './GrandSonPage'
class SonPage extends PureComponent {
render() {
return (
<GrandSonPage />
);
}
}
export default SonPage;GrandSonPage.js：使用ContextType接收數(shù)據(jù)
import React, { PureComponent } from 'react';
import { FamilyContext } from './FamilyContext';
class GrandSonPage extends PureComponent {
//
static contextType = FamilyContext;
componentDidMount() {
// 使用contexType可以在任意生命周期訪問數(shù)據(jù)
// 使用 this.context 來消費最近 Context 上的那個值
const value = this.context;
console.log(value);
}
render() {
// Context是1個對象，對對象進行解構(gòu)操作
const { name, age, gender } = this.context;
return (
<div>
name:{name}
<br />
age:{age}
<br />
gender:{gender}
</div>
);
}
}
export default GrandSonPage;
效果
場景3：動態(tài)和靜態(tài)Context
在ProviderPage.js中，被Provider包裹的組件可以更新的Context數(shù)據(jù)，沒被Provider包裹的組件只能獲取Context默認值。
代碼文件
ProductContext.js
import React from 'react';
// Context 可以讓我們無須明確地傳遍每一個組件，就能將值深入傳遞進組件樹。
// 創(chuàng)建1個Context對象
// 默認值，如果沒有匹配到Provider取默認值
export const ProductContext = React.createContext({
name: 'car',
price: 17000,
unit: '$',
});
export const { Provider, Consumer } = ProductContext;ProviderPage.js
import React, { PureComponent } from 'react';
import { Button, Divider } from 'antd';
import MiddlePage from './MiddlePage';
import { Provider } from './ProductContext';
class ProviderPage extends PureComponent {
state = {
product: {
name: 'plane',
price: 120000,
unit: '$',
},
};
handleChange = () => {
const { product: { name, price, unit } } = this.state;
this.setState({
product: {
name,
price: price + 1,
unit,
},
});
};
render() {
const { product } = this.state;
return (
<div>
<h1>父組件更新Context，被Provider包裹的子組件刷新值，沒被包裹的子組件使用Context默認值</h1>
{/*在Provider包裹的內(nèi)部組件使用state中的值*/}
<Provider value={product}>
<MiddlePage />
</Provider>
<Divider />
{/*不在Provider包裹的外部組件使用ProductContext重的默認值*/}
<MiddlePage />
<Divider />
<Button
onClick={this.handleChange}
type="primary"
>
增加
</Button>
</div>
// {不用Provider，顯示Context對象defaultValue
// <MiddlePage />
);
}
}
export default ProviderPage;
MiddlePage.js
import React, { PureComponent } from 'react';
import ConsumerPage from './ConsumerPage';
class MiddlePage extends PureComponent {
render() {
return (
<ConsumerPage />
);
}
}
export default MiddlePage;ConsumerPage.js
import React, { PureComponent } from 'react';
import { Consumer } from './ProductContext';
class ConsumerPage extends PureComponent {
render() {
return (
<Consumer>
{context => {
return (
<div>
name:{context.name}
<br />
price:{context.price}
<br />
unit:{context.unit}
</div>
);
}}
</Consumer>
);
}
}
export default ConsumerPage;效果
點擊增加按鈕，上面的price會增加(使用Context更新值)，下面的不變(使用Context默認值)。
場景4：在嵌套組件中更新Context
代碼文件
ProductContext.js
import React from 'react';
// Context 可以讓我們無須明確地傳遍每一個組件，就能將值深入傳遞進組件樹。
// 創(chuàng)建1個Context對象
// 注意第1個參數(shù)是1個object {}
export const ProductContext = React.createContext({
product: {
name: 'car',
price: 8000,
unit: '$',
},
// 通過context傳遞1個函數(shù)，使得consumer組件更新context
handlePrice: () => {
},
},
);
export const { Provider, Consumer } = ProductContext;ProviderPage.js
import React, { PureComponent } from 'react';
import MiddlePage from './MiddlePage';
import { Provider } from './ProductContext';
class ProviderPage extends PureComponent {
state = {
product: {
name: 'plane',
price: 120000,
unit: '$',
},
// state頁包含了更新函數(shù)，因此會被傳遞進context provider
handlePrice: () => this.handlePrice(),
};
handlePrice = () => {
const { product: { name, price, unit } } = this.state;
this.setState({
product: {
name,
price: price + 1,
unit,
},
});
};
render() {
const { product, handlePrice } = this.state;
return (
<div>
<h1>子組件通過context傳遞的函數(shù)更新context，等于在子組件中更新狀態(tài)</h1>
{/*注意此時傳遞進去的是state，包含product對象和1個函數(shù)*/}
<Provider value={{ product, handlePrice }}>
<MiddlePage />
</Provider>
{/*不用Provider，顯示Context對象defaultValue*/}
{/* <MiddlePage />*/}
</div>
);
}
}
export default ProviderPage;
MiddlePage.js
import React, { PureComponent } from 'react';
import ConsumerPage from './ConsumerPage';
class MiddlePage extends PureComponent {
render() {
return (
<ConsumerPage />
);
}
}
export default MiddlePage;ConsumerPage.js
import React, { PureComponent } from 'react';
import { Button, Divider } from 'antd';
import { Consumer } from './ProductContext';
class ConsumerPage extends PureComponent {
render() {
return (
<Consumer>
{/*創(chuàng)建的Context對象*/}
{/*ConsumerPage組件不僅從context獲取product對象值，還獲取1個handlePrice函數(shù)*/}
{/*注意參數(shù)名要和Provider中傳入的以及context中定義的一摸一樣*/}
{context => {
return (
<div>
name:{context.product.name}
<br />
price:{context.product.price}
<br />
unit:{context.product.unit}
<Divider />
<Button
onClick={context.handlePrice}
type="primary"
>
增加
</Button>
</div>
);
}}
</Consumer>
);
}
}
export default ConsumerPage;
效果
增加按鈕在子組件ConsumerPage.js中定義，Context傳遞1個函數(shù)給子組件，具體的函數(shù)實現(xiàn)在父組件ProviderPage.js中，此處感覺還是類似React回調(diào)函數(shù)，優(yōu)勢就是中間組件MiddlePage不用傳遞任何props，包括回調(diào)函數(shù)。
場景5：消費多個Context
代碼文件
MultiContext.js
import React from 'react';
const SchoolContext = React.createContext({
name: '南師附中',
location: '南京',
});
const StudentContext = React.createContext({
name: 'chengzhu',
age: 17,
});
export { SchoolContext, StudentContext };ProviderPage.js
import React, { PureComponent } from 'react';
import MiddlePage from './MiddlePage';
import { SchoolContext, StudentContext } from './MultiContext';
class ProviderPage extends PureComponent {
state = {
school: {
name: '清華大學',
location: '北京',
},
student: {
name: '張云',
age: 22,
},
};
render() {
const { school, student } = this.state;
return (
<div>
<h1>消費多個Context</h1>
<SchoolContext.Provider value={school}>
<StudentContext.Provider value={student}>
<MiddlePage />
</StudentContext.Provider>
</SchoolContext.Provider>
</div>
// 不用Provider包裹顯示Context中定義的默認值
// <MiddlePage />
);
}
}
export default ProviderPage;
MiddlePage.js
import React, { PureComponent } from 'react';
import ConsumerPage from './ConsumerPage';
class MiddlePage extends PureComponent {
render() {
return (
<ConsumerPage />
);
}
}
export default MiddlePage;ConsumerPage.js
import React, { PureComponent } from 'react';
import { SchoolContext, StudentContext } from './MultiContext';
class ConsumerPage extends PureComponent {
render() {
return (
<SchoolContext.Consumer>
{school => (
<StudentContext.Consumer>
{student => {
return (
<div>
就讀學校: {school.name}
<br />
學校位置: {school.location}
<br />
學生姓名: {student.name}
<br />
學生年齡: {student.age}
</div>
);
}}
</StudentContext.Consumer>
)}
</SchoolContext.Consumer>
);
}
}
export default ConsumerPage;效果
可以看到傳遞了2個Context，分別是SchoolContext和StudentContext，子組件ConsumerPage消費了傳遞進來的2個Context數(shù)據(jù)。
到此這篇關(guān)于React Context用法小結(jié)(附完整代碼)的文章就介紹到這了,更多相關(guān)React Context用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于瀏覽器中視頻播放器實現(xiàn)的基本思路與代碼,并且詳細總結(jié)了瀏覽器中的音視頻知識,對大家的理解和學習非常有幫助,需要的朋友可以參考下2021-08-08
React合成事件及Test Utilities在Facebook內(nèi)部進行測試
這篇文章主要介紹了React合成事件及Test Utilities在Facebook內(nèi)部進行測試，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
再次談?wù)揜eact.js實現(xiàn)原生js拖拽效果引起的一系列問題
React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站.本文給大家介紹React.js實現(xiàn)原生js拖拽效果，需要的朋友一起學習吧2016-04-04
antd中form表單的wrapperCol和labelCol問題詳解
最近學習中遇到了些問題,所以給大家總結(jié),下面這篇文章主要給大家介紹了關(guān)于antd中form表單的wrapperCol和labelCol問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
關(guān)于react+antd樣式不生效問題的解決方式
最近本人在使用Antd開發(fā)時遇到些問題,所以下面這篇文章主要給大家介紹了關(guān)于react+antd樣式不生效問題的解決方式,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
基于CSS實現(xiàn)MaterialUI按鈕點擊動畫并封裝成 React 組件
筆者先后開發(fā)過基于vue,react,angular等框架的項目,碧如vue生態(tài)的elementUI, ant-design-vue, iView等成熟的UI框架, react生態(tài)的ant-design, materialUI等,這些第三方UI框架極大的降低了我們開發(fā)一個項目的成本和復雜度,使開發(fā)者更專注于實現(xiàn)業(yè)務(wù)邏輯和服務(wù)化2021-11-11
這篇文章主要介紹了React useEffect的理解與使用，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-04-04
本文主要介紹了React自定義Hook-useForkRef的具體使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在開發(fā)中，我們想要給一個組件的顯示和消失添加某種過渡動畫，可以很好的增加用戶體驗。 當然，我們可以通過原生的CSS來實現(xiàn)這些過渡動畫，這篇文章主要介紹了React過渡動畫組件使用2022-09-09
React是一個用于構(gòu)建用戶界面的JavaScript庫,下面這篇文章主要給大家介紹了關(guān)于React組件化的一些額外知識點,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10