React Context和高階元件HOC用法

本文將通過官方例項，組合運用context和高階元件，並給出例項**的方式詳細介紹context、高階元件的概念和用法。

在典型的react應用中，資料是通過props屬性一層層的由上向下傳遞。但是對於應用中很多元件都需要使用的值（比如說：頁面的主題，頁面語言選擇），如果還是通過props屬性一層層的傳遞下來，會非常繁瑣。

context通過元件樹提供了一種傳遞資料的方法，可以避免在每一層手動的傳遞props屬性，卻能讓元件共享此類資料。

設計目的

context的設計目的是為了共享那些被元件樹認為是「全域性」的資料。

注意:

不要僅僅為了避免使用props在幾個層級下的元件傳遞資料，而使用context，它被用於多個層級的多個元件需要使用相同資料的場景。

高階元件是乙個沒有***的純函式，該函式接受乙個元件作為引數，並返回乙個新的元件。高階元件並不是乙個react api，而是一種模式。

元件是將props屬性轉成ui，而高階元件是將元件轉成乙個新的元件。高階元件通過將原元件包裹在容器元件裡面的方式來組合使用原元件。

如果大家使用redux作為狀態管理容器，那麼大家對react-redux中的connect很熟悉，面試的時候，我老是把connect說成高階元件，但是它的形式卻並不附和我們上面介紹的高階元件。其實connect是乙個返回接受單引數的高階元件的高階函式。connect返回的高階元件的形式是下面這樣的：

component => component

上述形式的高階元件有個顯著優點：輸入和輸出型別相同的函式是很容易組合在一起的。

下面我們將通過例子詳細介紹高階元件到底可以做什麼。

我們以頁面主題為例，使用context實現資料的傳遞。並實現動態context的功能，通過新增乙個功能按鈕，實現context傳遞的資料的切換。

第一步：我們首先建立乙個context.js：


export
const themes = ,
dark: ,
};export
const themecontext = react.createcontext(
themes.dark // default value
);

上述**使用了react.createcontext，用法如下：

const  =react.createcontext(defaultvalue);

當 react 渲染 context 元件 consumer 時，它將從元件樹的上層中最接近的匹配的 provider 讀取當前的 context 值。

如果上層沒有匹配的provider，而此時我們渲染了乙個consumer元件，那麼此時就會用到我們建立context的時候用到的defaultvalue。

第二步，我們原本會打算建立需要使用頁面主題資料的元件，但是我們想一下：我們的react應用不可能只有乙個元件會用到我們定義的主題context，如果給每個元件都乙個個的手動引用主題context，會很麻煩。這個時候我們就可以使用高階元件了。所以我們建立下面這個高階元件：


import  from "./context"
export function
withtheme
(component)  = this;
return()}
}}

從上面可以看出來，想要使用定義的context，只需要在原元件包裹在react.createcontext生成的consumer裡面就可以了。

接下來，我們建立乙個需要使用頁面主題資料的元件themebutton.js：


class
themebutton
extends
component
render() = this;
return(
div>)}
}//withtheme就是上面定義的高階元件
export default withtheme(themebutton);

接下來我們建立乙個展示元件，裡面包含上述themebutton元件和乙個用於切換主題的按鈕。**如下：


import themebutton from "./themebutton"
class
*******
extends
component
render() = this;
return(
"按我吧" />
//這裡的changetheme處理函式從父元件傳入
別按我                
div>)}
}export default *******;

最後我們建立乙個容器元件，用於管理所有的資料和處理程式：


import  from "./context"
import ******* from "./*******"
class
container
extends
component;
this.toggletheme = this.toggletheme.bind(this);
}toggletheme()))
}render()>
this.toggletheme} />
div>)}
}export default  container;

從上面可以看出來，想要為使用themecontext的元件提供值，只需要使用react.createcontext生成的provider包裹展示元件就可以了。

React Context和高階元件HOC用法

React Context 理解和使用

新版 react context的寫法

react context上下文使用

React Context和高階元件HOC用法

React Context 理解和使用

新版 react context的寫法

react context上下文使用

相關推薦