在一個經(jīng)典的
React應(yīng)用中汰蜘，組件之間通信是常用到的技術(shù)方案捆交。在父子組件之間通常通過props來傳遞參數(shù)茧妒，而非父子組件就比較麻煩了姿骏，要么就一級一級通過props傳遞，要么就使用ReduxorMobx這類狀態(tài)管理的狀態(tài)管理庫年碘，但是這樣無疑增加了應(yīng)用的復(fù)雜度澈歉。在 FEers 的期盼中展鸡，React團(tuán)隊終于從16.3.0版本開始新增了一個新的 APIContext屿衅，福音啊。好了莹弊，今天我就來一起學(xué)習(xí)一下這個新的Context涤久。
什么時候使用 Contsxt
Context 目的是為了共享可以被認(rèn)為是 React 組件“全局”樹的數(shù)據(jù)。例如當(dāng)前應(yīng)用的主題忍弛、首選語言等等响迂。接下來看看通過 props 和 Context 兩種方式實現(xiàn)按鈕組件樣式參數(shù)傳遞方式的對比：
- props
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
Toolbar(props) {
return (
<div>
<ThemedButton theme={props.theme} />
</div>
);
}
ThemedButton(props) {
return <Button theme={props.theme} />;
}
- Context
// 創(chuàng)建 context 實例
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
ThemedButton(props) {
return (
<ThemeContext.Consumer>
{theme => <Button {...props} theme={theme} />}
</ThemeContext.Consumer>
);
}
API
React.createContext
創(chuàng)建一個 Context ，React.createContext 提供了 {Provider,Comsumer} 兩個方法细疚，上面的代碼也可以這個來寫：
const {Provider,Comsumer} = React.createContext('light');
class App extends React.Component {
render() {
return (
<Provider value="dark">
{/* ... */}
</Provider>
);
}
}
{/* ... */}
ThemedButton(props) {
return (
<Consumer>
{/* ... */}
</Consumer>
);
}
Provider
這里的 Provider 類似 react-redux 中的 Provider 組件蔗彤，用來注入全局的 data （允許 Consumer 訂閱 Context 的變化）。一個 Provider 可以連接到多個 Consumer疯兼。
Consumer
Consumer 組件然遏，表示要消費 Provider 傳遞的數(shù)據(jù)（訂閱 Context 的響應(yīng)組件）。當(dāng) Provider 發(fā)生變化的時候吧彪，所有的 Consumer 都會被 re-rendered待侵。
結(jié)束語
新 Context 的引入，一定程度上可以減少不少項目對 redux 全家桶的依賴姨裸，從而降低了項目的復(fù)雜程度秧倾，何樂而不為呢～～
原文更多文章 傳送門>>
