前言：React Context是什么侧但？
- 原因：傳統(tǒng)的react組件露久，父組件向子組件進(jìn)行傳參，子組件通過(guò)props進(jìn)行接收朴恳，再往復(fù)循環(huán)傳遞給更深層 次的子組件抄罕，這樣是比較臃腫和麻煩的，所有有了 React Context
- Context 通過(guò)組件樹(shù)提供了一個(gè)傳遞數(shù)據(jù)的方法于颖，從而避免了在每一個(gè)層級(jí)手動(dòng)的傳遞 props 屬性
示意圖
1.0 在類(lèi)組件中使用Context
- 在類(lèi)組件中我們需要通過(guò) React.createContext來(lái)進(jìn)行新建一個(gè)content 呆贿，在父組件中通過(guò) Provider(發(fā)布者)的value屬性進(jìn)行參數(shù)設(shè)置 。
-
在需要用更深次子組件中通過(guò) Consumer(消費(fèi)者) 獲取到value上的值恍飘，從而達(dá)到跨組件傳參的目的 榨崩。
效果圖
1.1 在parment.jsx 父組件中創(chuàng)建 Context
import React from 'react';
import Child from './child.jsx'
export const UserContext = React.createContext(); //創(chuàng)建Context 定義為“UserContext ”谴垫，并且輸出
1.1.1 在parment.jsx 引入需要傳參的組件章母，并且掛載 contextType
import React from 'react';
import Child from './child.jsx'
import GrandChild from './grandChild.jsx'
export const UserContext = React.createContext(); //創(chuàng)建Context 定義為“UserContext ”，并且輸出
GrandChild .contextType = UserContext; //需要傳參的組件
1.1.2 在parment.jsx 通過(guò) Provider（發(fā)布者）value 屬性傳遞參數(shù)
import React from 'react';
import Child from './child.jsx'
import GrandChild from './grandChild.jsx'
export const UserContext = React.createContext(); //創(chuàng)建Context 定義為“UserContext ”翩剪，并且輸出
GrandChild .contextType = UserContext; //需要傳參的組件
//父組件
export default class Parment extends React.Component {
static contextType
render() {
//2, Context.Provider 標(biāo)簽注釋掉乳怎，則傳入默認(rèn)的
return (
<div>
<UserContext.Provider value={{ userName: "zhangsang" }}>
<Child />
</UserContext.Provider>
</div>
);
}
}
1.2 在child.jsx 組建中正常引用 grandChild.jsx 組件
import React from 'react';
import GrandChild from './grandChild.js' //引入組件
//用戶(hù)信息 - 二級(jí)頁(yè)面
export default class Child extends React.Component {
render() {
return (<GrandChild />);
}
}
1.3.0 引入在parment.jsx 中定義的 context
import React from 'react';
import { UserContext } from './parment.jsx'
1.3.1 通過(guò)Consumer（消費(fèi)者）來(lái)獲取傳輸?shù)膮?shù)
import React from 'react';
import { UserContext } from './parment.jsx'
class GrandChild extends React.Component {
render() {
// console.log(this.context, '===userBaseInfo');
return (
<div>
用戶(hù)名：{this.context.userName}
<br />
<UserContext.Consumer>
{(value) => {
return (<span>{value.userName}</span>);
}}
</UserContext.Consumer>
</div>
);
}
}
export default GrandChild
注： 如果想要在Consumer外使用參數(shù)，需要用this.context 進(jìn)行獲取
2.0 在hook 中使用Context
- 在hook組件中也是需要用React.createContext來(lái)進(jìn)行新建一個(gè)content, 在父組件中通過(guò) Provider(發(fā)布者)的value屬性進(jìn)行參數(shù)設(shè)置
-
但是前弯， 可以通過(guò)內(nèi)置的hook方法 useContext 來(lái)進(jìn)行獲取value上的值蚪缀。
樣式圖
2.1 在parment.jsx 父組件中創(chuàng)建 Context并且掛載傳遞參數(shù)
import React from 'react';
import Child from './child'
export const hookContext = React.createContext()
export default function UContext() {
return (
<div>
// 當(dāng)Provider 標(biāo)簽不在的時(shí)候，會(huì)渲染默認(rèn)值
<ThemeContext.Provider value={{ userName: "zhangsang" }}>
<Child />
</ThemeContext.Provider>
</div>
);
}
2.2 在child.jsx 組建中正常引用 grandChild.jsx 組件
import React from 'react';
import GrandChild from './grandChild'
export default function Toolbar() {
return (
<div>
<GrandChild />
</div>
);
}
2.3.0 引入在parment.jsx 中定義的 context 和useContext
import React, { useContext } from 'react';
import { hookContext } from './parment.jsx'
2.3.1 獲取和使用參數(shù)
import React, { useContext } from 'react';
import { hookContext } from './parment.jsx'
export default function GrandChild() {
const value = useContext(hookContext);
return (
<span>{value.userName}</span>
);
}
結(jié)語(yǔ)
- 正是因?yàn)槟J(rèn)語(yǔ)言的可配置性恕出，可以將系統(tǒng)設(shè)置成多語(yǔ)言系統(tǒng)
- 希望各位朋友能精通React 询枚，這里有react 的 demo ，望多指教 浙巫。
碼云地址：react-question-v6
碼云地址 ：react-question-vite
