在react中，context用於共享數據，並且允許數據隔代傳遞；context提供了一種新的組件之間共享數據的方式，不必顯式地通過組件樹的逐層傳遞props ，能夠避免使用大量重複的props來傳遞值。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
Context提供了一種新的組件之間共享資料的方式，允許資料隔代傳遞，而不必顯式的通過組件樹逐層傳遞props。
Context 提供了一種在元件之間共享值的方式，而不必明確地透過元件樹的逐層傳遞 props。如果取得值和使用值的層級相隔很遠，或是需要使用這個值的元件很多很分散，則可以使用Context來共享數據，避免使用大量重複的props來傳遞值。如果只是一個元件需要使用這個值，可以在產生這個值的位置產生這個元件，然後用props層層傳遞到元件實際展示的位置。
基本上使用方式
1、自訂Context
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;上面的程式碼定義了一個ThemeContext，預設值為'light'。
2、在需要的位置使用Context的Provider
import ThemeContext from './context/ThemeContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
function App() {
return (
);
}
export default App;在元件的最外層使用了自訂Context的Provider，傳入value覆寫了預設值，之後子元件讀到的ThemeContext的值就是'dark'而不是預設值'light'。如果Provider有value定義就會使用value的值（即使值是undefined，即未傳入value），則只有當Provider未提供時才會使用定義時的預設值。
3、定義contextType，使用取得到的Context上的值
import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";
class ThemedButton extends Component {
static contextType = ThemeContext;
render() {
return ;
}
}
export default ThemedButton;ThemedButton聲明了contextType是ThemeContext，因此this.context的值就是最近的ThemeContext提供的value，也就是'light'。
效果圖：
#推薦學習：《react影片教學》
以上是react中context的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
