快捷導(dǎo)航

react中關(guān)于Context/Provider/Consumer傳參的使用

更新時(shí)間：2022年09月15日 08:34:46 作者：何其濤

這篇文章主要介紹了react中關(guān)于Context/Provider/Consumer傳參的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Context/Provider/Consumer傳參使用

react context這個(gè)api很少用到,所以一直不太清楚如何使用,最近在看antd的項(xiàng)目源碼時(shí),發(fā)現(xiàn)在組件中有類似Template.Comsumer的寫法,一時(shí)沒反應(yīng)過來,本著碰到不懂得都要追根究底的原則,下面好好學(xué)習(xí)一下,Context這個(gè)api的使用

Context

作用

上下文(Context) 提供了一種通過組件樹傳遞數(shù)據(jù)的方法，無需在每個(gè)級(jí)別手動(dòng)傳遞 props 屬性。

但是我們現(xiàn)在通用的傳遞數(shù)據(jù)的做法是使用redux,mobx,應(yīng)為這些數(shù)據(jù)管理插件,能更好的對(duì)數(shù)據(jù)做管理已經(jīng)更新 ,而使用Context只能將部分?jǐn)?shù)據(jù)傳入,且使用起來比較麻煩,容易造成混亂.

所以一般情況下我們不要使用Context,雖然不太用到但是還是需要學(xué)習(xí)的,指不定哪天就轉(zhuǎn)正了

如何使用

這里直接就用官方的例子來解釋,自己懶得寫例子了 = ) !

//創(chuàng)建一個(gè)Context?
//light就是傳入的默認(rèn)值 最好傳入默認(rèn)值因?yàn)榈谝淮武秩镜臅r(shí)候沒有默認(rèn)值可能會(huì)導(dǎo)致錯(cuò)誤
const ThemeContext = React.createContext('light');
class App extends React.Component {
? render() {
? ? return (
? ? ? ? //使用Provider設(shè)置dark值
? ? ? <ThemeContext.Provider value="dark">
? ? ? ? <Toolbar />
? ? ? </ThemeContext.Provider>
? ? );
}
//中間組件
function Toolbar(props) {
? return (
? ? <div>
? ? ? <ThemedButton />
? ? </div>
? );
}
class ThemedButton extends React.Component {
//注冊(cè)context自動(dòng)獲取當(dāng)前組件最近的Provider,獲取到context的值 ,這種寫法是不直接指定context的寫法
//可以為類上的 contextType 屬性分配由 React.createContext() 創(chuàng)建的 Context 對(duì)象。 這允許您使用this.context 使用該 Context 類型 的最近的當(dāng)前值。
? static contextType = ThemeContext;
? render() {
? ? return <Button theme={this.context} />;
? }
}

指定某個(gè)Context的寫法

...
class ThemedButton extends React.Component {
?//使用Consumer,獲取某個(gè)Context的值
? render() {
? ??? ?return (
? ? ? <ThemeContext.Consumer>
? ? ? ?? ?{theme => <Button {...props} theme={theme} />}
? ? ? </ThemeContext.Consumer>
? ? )
? }
}

我們同樣希望能夠在子組件中對(duì)Context的值做改變,這時(shí)候就需要用到回調(diào)函數(shù)

//創(chuàng)建一個(gè)Context?
//light就是傳入的默認(rèn)值 最好傳入默認(rèn)值因?yàn)榈谝淮武秩镜臅r(shí)候沒有默認(rèn)值可能會(huì)導(dǎo)致錯(cuò)誤
const ThemeContext = React.createContext({theme: 'light',toggle: ()=> {}});
class App extends React.Component {
? constructor(props) {
? ? super(props);
? ? this.toggle = () => { //設(shè)定toggle方法，會(huì)作為context參數(shù)傳遞
? ? ? this.setState(state => ({
? ? ? ? theme:
? ? ? ? ? state.theme === themes.dark
? ? ? ? ? ? ? themes.light
? ? ? ? ? ? : themes.dark,
? ? ? }));
? ? };
? ? this.state = {
? ? ? theme: themes.light,
? ? ? toggle: this.toggle,
? ? };
? }
? render() {
? ? return (
? ? ? ?
? ? ? <ThemeContext.Provider value={this.state}>
? ? ? ? <Toolbar />
? ? ? </ThemeContext.Provider>
? ? );
}
//中間組件
function Toolbar(props) {
? return (
? ? <div>
? ? ? <ThemedButton />
? ? </div>
? );
}
class ThemedButton extends React.Component {
?//使用Consumer,獲取某個(gè)Context的值
? render() {
? ??? ?return (
? ? ? <ThemeContext.Consumer>
? ? ? ?? ?{theme => <Button {...props} theme={theme} />}
? ? ? </ThemeContext.Consumer>
? ? )
? }
}

Context的值每次更新的時(shí)候，所有作為 Provider(提供者) 后代的 Consumer(使用者) 組件都將重新渲染。

總的來說Context就是用來傳遞父子組件之前的狀態(tài)的api,防止多層組件傳遞狀態(tài)的問題,但是因?yàn)槲覀儸F(xiàn)在都有全局狀態(tài)管理的插件所以一般用不到, 但是其實(shí)在我們寫通用組件的時(shí)候可能我們不希望污染Redux的狀態(tài)樹,或者讓組件依賴于其他狀態(tài)插件,就可以用到這個(gè)功能

使用context向后代組件傳參

當(dāng)我們組件內(nèi)嵌套多層后代組件的時(shí)候用props傳參就顯得繁瑣，且不美觀，這時(shí)候我們可以用context向后代組件直接傳參：

調(diào)用React.createContext()創(chuàng)建兩個(gè)組件（Provider、Consumer）分別用來提供數(shù)據(jù)和接收數(shù)據(jù)
使用Provider組件作為提供數(shù)據(jù)的父節(jié)點(diǎn)
給Provider組件設(shè)置value屬性，需要傳遞到后代組件中的數(shù)據(jù)作為value的值
調(diào)用Consumer組件接收數(shù)據(jù)（該組件內(nèi)部是一個(gè)回調(diào)函數(shù)，形參就是從Provider組件傳過來的參數(shù)）

代碼示例：

class Parent extends React.Component {
    state={
        num:555,
        color:'green'
    }
    render() {
        return (
            <Provider value={this.state.color}>
                <div className="first">
                    <div>第1層</div>
                    <Css />
                    <div>第1層</div>
                </div>
            </Provider>
        )
    }
}
class Css extends React.Component {
    render() {
        return (
            <div className="second">
                <div>第2層</div>
                <Js />
                <div>第2層</div>
            </div>
        )
    }
}
class Js extends React.Component {
    render() {
        return (
            <div className="third">
                <div>第3層</div>
                <Html />
                <div>第3層</div>
            </div>
        )
    }
}
class Html extends React.Component {
    render() {
        return (
            <div className="fourth">
                <div>第4層</div>
                <Consumer>{data=> <span>呼倫貝爾的顏色是{data}</span>}</Consumer>
                <div>第4層</div>
            </div>
        )
    }
}