日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react中關于Context/Provider/Consumer傳參的使用_React

作者：何其濤 ? 更新時間： 2022-11-06 編程語言

Context/Provider/Consumer傳參使用

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

Context

作用

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

但是我們現在通用的傳遞數據的做法是使用redux,mobx,應為這些數據管理插件,能更好的對數據做管理已經更新 ,而使用Context只能將部分數據傳入,且使用起來比較麻煩,容易造成混亂.

所以一般情況下我們不要使用Context,雖然不太用到但是還是需要學習的,指不定哪天就轉正了

如何使用

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

//創建一個Context?
//light就是傳入的默認值 最好傳入默認值因為第一次渲染的時候沒有默認值可能會導致錯誤
const ThemeContext = React.createContext('light');
class App extends React.Component {
? render() {
? ? return (
? ? ? ? //使用Provider設置dark值
? ? ? <ThemeContext.Provider value="dark">
? ? ? ? <Toolbar />
? ? ? </ThemeContext.Provider>
? ? );
}
//中間組件
function Toolbar(props) {
? return (
? ? <div>
? ? ? <ThemedButton />
? ? </div>
? );
}
class ThemedButton extends React.Component {
//注冊context自動獲取當前組件最近的Provider,獲取到context的值 ,這種寫法是不直接指定context的寫法
//可以為類上的 contextType 屬性分配由 React.createContext() 創建的 Context 對象。 這允許您使用this.context 使用該 Context 類型 的最近的當前值。
? static contextType = ThemeContext;
? render() {
? ? return <Button theme={this.context} />;
? }
}

指定某個Context的寫法

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

我們同樣希望能夠在子組件中對Context的值做改變,這時候就需要用到回調函數

//創建一個Context?
//light就是傳入的默認值 最好傳入默認值因為第一次渲染的時候沒有默認值可能會導致錯誤
const ThemeContext = React.createContext({theme: 'light',toggle: ()=> {}});
class App extends React.Component {
? constructor(props) {
? ? super(props);
? ? this.toggle = () => { //設定toggle方法，會作為context參數傳遞
? ? ? 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,獲取某個Context的值
? render() {
? ??? ?return (
? ? ? <ThemeContext.Consumer>
? ? ? ?? ?{theme => <Button {...props} theme={theme} />}
? ? ? </ThemeContext.Consumer>
? ? )
? }
}

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

總的來說Context就是用來傳遞父子組件之前的狀態的api,防止多層組件傳遞狀態的問題,但是因為我們現在都有全局狀態管理的插件所以一般用不到, 但是其實在我們寫通用組件的時候可能我們不希望污染Redux的狀態樹,或者讓組件依賴于其他狀態插件,就可以用到這個功能?

使用context向后代組件傳參

當我們組件內嵌套多層后代組件的時候用props傳參就顯得繁瑣，且不美觀，這時候我們可以用context向后代組件直接傳參：

  • 調用React.createContext()創建兩個組件（Provider、Consumer）分別用來提供數據和接收數據
  • 使用Provider組件作為提供數據的父節點
  • 給Provider組件設置value屬性，需要傳遞到后代組件中的數據作為value的值
  • 調用Consumer組件接收數據（該組件內部是一個回調函數，形參就是從Provider組件傳過來的參數）

代碼示例：

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>
        )
    }
}

原文鏈接：https://blog.csdn.net/deng1456694385/article/details/98601308

欄目分類
最近更新