Apakah penggunaan konteks dalam tindak balas

Secara tindak balas, konteks digunakan untuk berkongsi data dan membenarkan data dihantar ke seluruh generasi konteks menyediakan cara baharu untuk berkongsi data antara komponen tanpa perlu meneruskan prop secara eksplisit melalui pepohon komponen lapisan demi lapisan boleh mengelak daripada menggunakan sebilangan besar prop berulang untuk menghantar nilai.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah penggunaan konteks dalam tindak balas

Konteks menyediakan cara baharu untuk berkongsi data antara komponen, membolehkan data dihantar dari generasi ke generasi tanpa perlu melalui pepohon komponen secara eksplisit Lapisan demi lapisan.

Konteks menyediakan cara untuk berkongsi nilai antara komponen tanpa perlu melepasi prop secara eksplisit melalui setiap peringkat pepohon komponen. Jika tahap mendapatkan nilai dan menggunakan nilai adalah berjauhan, atau komponen yang perlu menggunakan nilai adalah banyak dan berselerak, anda boleh menggunakan Konteks untuk berkongsi data dan mengelak daripada menggunakan sejumlah besar prop berulang untuk melepasi nilai. Jika hanya satu komponen perlu menggunakan nilai ini, anda boleh menjana komponen di lokasi di mana nilai dijana, dan kemudian menggunakan prop untuk menghantarnya lapisan demi lapisan ke lokasi di mana komponen sebenarnya dipaparkan.

Penggunaan asas

1 Konteks Tersuai

import React from 'react';
 
const ThemeContext = React.createContext('light');
 
export default ThemeContext;

Kod di atas mentakrifkan ThemeContext, secara lalai Nilai. adalah 'ringan'.

2. Gunakan Penyedia Konteks jika perlu

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;

Gunakan Penyedia Konteks tersuai di lapisan paling luar komponen, dan nilai masuk mengatasi nilai Lalai, nilai ThemeContext yang dibaca oleh komponen kanak-kanak adalah 'gelap' dan bukannya nilai lalai 'cahaya'. Jika Pembekal mempunyai takrifan nilai, nilai nilai akan digunakan (walaupun nilai itu tidak ditentukan, iaitu, tiada nilai dihantar masuk Nilai lalai takrifan akan digunakan hanya apabila Penyedia tidak menyediakan). ia.

3. Tentukan contextType dan gunakan nilai Context yang diperoleh

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 mengisytiharkan bahawa contextType ialah ThemeContext, jadi nilai this.context ialah yang terkini Nilai yang disediakan oleh ThemeContext ialah 'ringan'.

Perenderan:

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah penggunaan konteks dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!