我們知道，React中的資料傳遞是自上而下的（從父組件傳給子組件），通過props逐層傳遞，
但是這樣層數多了，會極其繁瑣，因此，就提到了Context背景關系共享資料，這種方法不需要顯式的通過props傳遞，
一、Context：為了給某個組件共享全域資料，
例如：網站當前登陸用戶、主題、首選語言等，
- Context 主要應用場景：很多不同層級的組件需要訪問一些同樣的資料，
- 謹慎使用，會使復用性變差，
const ThemeContext = React.createContext("light");
const App2 = () => {
return (
<ThemeContext.Provider value="yellow">
<Toolbar />
</ThemeContext.Provider>
);
};
const Toolbar = () => {
return (
<div>
<ThemeButton />
</div>
);
};
class ThemeButton extends React.Component {
// 指定 contextType 讀取當前的 theme context， React 會往上找到最近的 theme Provider，然后使用它的值，
// 在這個例子中，當前的 theme 值為 “yellow”，
static contextType = ThemeContext; // 可以使用 static 這個類屬性來初始化你的 contextType，
render() {
return <Button theme={this.context} />;
}
}
const MyContext = React.createContext(defaultValue);
創建一個 Context 物件，當 React 渲染一個訂閱了這個 Context 物件的組件，這個組件會從組件樹中離自身最近的那個匹配的 Provider 中讀取到當前的 context 值，
只有當組件所處的樹中沒有匹配到 Provider 時，其 defaultValue 引數才會生效，
通過新舊值檢測來確定變化，使用了與 Object.is 相同的演算法，
<MyContext.Provider value={變數} >
- Provider接受一個value屬性，傳遞給消費組件，可以一對多，
- Provider的value發生變化時，所有使用它的消費組件都會重新渲染，
- 要將value提到state中，否則會觸發所有consumers組件的重新渲染，
錯誤案例：
class App extends React.Component {
render() {
return (
<MyContext.Provider value={{something: 'something'}}>
<Toolbar />
</MyContext.Provider>
);
}
}
正確寫法：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: {something: 'something'},
};
}
render() {
return (
<MyContext.Provider value={this.state.value}>
<Toolbar />
</MyContext.Provider>
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303698.html
標籤：其他