react中context的用法是什麼

在react中，context用於共享數據，並且允許數據隔代傳遞；context提供了一種新的組件之間共享數據的方式，不必顯式地通過組件樹的逐層傳遞props ，能夠避免使用大量重複的props來傳遞值。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react中context的用法是什麼

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 (
    <ThemeContext.Provider value=&#39;dark&#39;>
      <div className="App">
        <header className="App-header">
          <ThemedButton />
        </header>
      </div>
    </ThemeContext.Provider>
  );
}
 
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 <button>{this.context}</button>;
}
}
 
export default ThemedButton;

ThemedButton聲明了contextType是ThemeContext，因此this.context的值就是最近的ThemeContext提供的value，也就是'light'。

效果圖：

#推薦學習：《react影片教學》

以上是react中context的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！