Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) · Pelajaran

API Konteks React

Gunakan API Konteks React untuk mengurus keadaan global dan berkongsi data merentas komponen dengan cekap.

Pelajaran 1 daripada 412 langkah

API Konteks React ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Mengapa Keadaan Global?

Dalam aplikasi yang lebih besar, komponen sering perlu berkongsi data. Penghantaran data melalui banyak lapisan komponen dipanggil penghantaran prop berantai. Hal ini boleh menyebabkan kod anda sukar dibaca dan diselenggara.

API Konteks React membantu menyelesaikan masalah ini dengan menyediakan cara untuk berkongsi keadaan merentas pepohon komponen tanpa menghantar prop secara manual pada setiap peringkat.

Kenali Konteks React

Konteks React menyediakan cara untuk menghantar data melalui pepohon komponen tanpa perlu menghantar prop secara manual pada setiap peringkat.

Ia direka untuk berkongsi data "global" bagi pepohon komponen React, seperti pengguna semasa yang disahkan, tema atau bahasa pilihan.

Tentukan Konteks Anda

Langkah pertama ialah mencipta objek Konteks menggunakan React.createContext(). Anda boleh memberikan nilai lalai, yang digunakan apabila komponen cuba menggunakan konteks tanpa Provider yang sepadan di atasnya dalam pepohon.

// Simulate React environment
const createContext = (defaultValue) => ({
  _value: defaultValue, // Internal storage for the context value
  Provider: function({ value, children }) {
    this._value = value; // Update internal value when Provider is used
    return children; // Simulate rendering children
  },
  get value() { return this._value; } // Getter for useContext
});

// --- Your Context ---
const ThemeContext = createContext('light');

// --- Entry point (simulated) ---
function main() {
  console.log("ThemeContext default value:", ThemeContext.value);
}

main();

Menyediakan Data

Untuk menyediakan nilai konteks kepada komponen, balut komponen tersebut dengan Pembekal Konteks. Pembekal menerima prop value, iaitu data yang boleh dicapai oleh semua komponen yang bersarang di dalamnya.

Anda boleh mempunyai beberapa Provider untuk konteks yang berbeza, atau Provider bersarang untuk konteks yang sama bagi menggantikan nilai.

// Simulate React environment
const createContext = (defaultValue) => ({
  _value: defaultValue,
  Provider: function({ value, children }) {
    this._value = value;
    return children;
  },
  get value() { return this._value; }
});

// --- Your Context ---
const UserContext = createContext(null); // Default to no user

// --- Simulated Component Tree ---
const App = () => {
  const currentUser = { name: "Coddy", id: 123 };
  return UserContext.Provider({
    value: currentUser,
    children: "User data is now provided."
  });
};

// --- Entry point ---
function main() {
  App(); // Call App to set the context value
  console.log("Context value after App render:", UserContext.value.name);
}

main();

Mencapai Konteks dengan Hook

Cara paling mudah untuk membaca konteks dalam komponen fungsi adalah dengan menggunakan hook useContext. Hook ini menerima objek Konteks itu sendiri (contohnya, UserContext) sebagai hujah dan mengembalikan value konteks semasa.

Apabila nilai konteks berubah, komponen yang menggunakan useContext akan dirender semula secara automatik.

// Simulate React environment
const createContext = (defaultValue) => ({
  _value: defaultValue,
  Provider: function({ value, children }) {
    this._value = value;
    return children;
  },
  get value() { return this._value; }
});

const useContext = (Context) => {
  return Context.value;
};

// --- Your Context & Components ---
const LanguageContext = createContext('en');

const GreetUser = () => {
  const language = useContext(LanguageContext);
  return `Greeting in ${language}: Hello!`;
};

const App = () => {
  return LanguageContext.Provider({
    value: "es", // Provide Spanish language
    children: GreetUser() // Render GreetUser inside
  });
};

// --- Entry point ---
function main() {
  console.log(App()); // Simulate rendering App and logging GreetUser's output
}

main();

Contoh Praktikal: Tema

Mari bina penukar tema ringkas menggunakan Konteks. Kita akan menyimpan tema semasa (contohnya, 'light' atau 'dark') dan fungsi untuk menukarnya dalam konteks kita.

Mula-mula, kita mencipta konteks dan komponen pembalut, ThemeProvider, yang akan mengurus keadaan tema.

// Simulate React environment
let _themeState = 'light'; // Simulate useState for theme
let _setThemeState = (newTheme) => { _themeState = newTheme; };

const createContext = (defaultValue) => ({
  _value: defaultValue,
  Provider: function({ value, children }) {
    this._value = value;
    return children;
  },
  get value() { return this._value; }
});

// --- Theme Context ---
const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {}
});

// --- Theme Provider Component ---
const ThemeProvider = ({ children }) => {
  const theme = _themeState; // Get current theme
  const toggleTheme = () => {
    _setThemeState(theme === 'light' ? 'dark' : 'light');
    console.log("Theme toggled to:", _themeState); // Log for simulation
  };

  return ThemeContext.Provider({
    value: { theme, toggleTheme },
    children: children
  });
};

// --- Entry point ---
function main() {
  // Simulate initial render of ThemeProvider
  ThemeProvider({ children: "Theme setup complete." });
  console.log("Initial theme:", ThemeContext.value.theme);
}

main();

Memaparkan Tema Semasa

Dengan adanya ThemeProvider, mana-mana komponen yang bersarang di dalamnya boleh mencapai fungsi theme dan toggleTheme menggunakan useContext(ThemeContext). Mari cipta komponen untuk memaparkan tema semasa.

// Simulate React environment (from previous scenes)
let _themeState = 'light';
let _setThemeState = (newTheme) => { _themeState = newTheme; };

const createContext = (defaultValue) => ({
  _value: defaultValue,
  Provider: function({ value, children }) {
    this._value = value;
    return children;
  },
  get value() { return this._value; }
});

const useContext = (Context) => {
  return Context.value;
};

// --- Theme Context ---
const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {}
});

// --- Theme Provider Component ---
const ThemeProvider = ({ children }) => {
  const theme = _themeState;
  const toggleTheme = () => {
    _setThemeState(theme === 'light' ? 'dark' : 'light');
  };
  return ThemeContext.Provider({
    value: { theme, toggleTheme },
    children: children
  });
};

// --- Component to display theme ---
const ThemeDisplay = () => {
  const { theme } = useContext(ThemeContext);
  return `Current theme is: ${theme}`;
};

// --- App structure ---
const App = () => {
  return ThemeProvider({
    children: ThemeDisplay() // ThemeDisplay is nested inside Provider
  });
};

// --- Entry point ---
function main() {
  console.log(App()); // Simulate rendering
}

main();

Menambahkan Interaktiviti

Untuk membolehkan pengguna menukar tema, kita memerlukan cara untuk memanggil fungsi toggleTheme yang disediakan oleh ThemeProvider. Kita akan mencipta komponen butang yang menggunakan useContext untuk mendapatkan fungsi ini dan mencetuskannya apabila diklik.

// Simulate React environment (from previous scenes)
let _themeState = 'light';
let _setThemeState = (newTheme) => { _themeState = newTheme; };

const createContext = (defaultValue) => ({
  _value: defaultValue,
  Provider: function({ value, children }) {
    this._value = value;
    return children;
  },
  get value() { return this._value; }
});

const useContext = (Context) => {
  return Context.value;
};

// --- Theme Context ---
const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {}
});

// --- Theme Provider Component ---
const ThemeProvider = ({ children }) => {
  const theme = _themeState;
  const toggleTheme = () => {
    _setThemeState(theme === 'light' ? 'dark' : 'light');
    console.log("Theme toggled to:", _themeState); // Log for simulation
  };
  return ThemeContext.Provider({
    value: { theme, toggleTheme },
    children: children
  });
};

// --- Component to toggle theme ---
const ThemeTogglerButton = () => {
  const { toggleTheme } = useContext(ThemeContext);
  // Simulate button click
  return `Click to toggle theme. (Calling toggleTheme function)`;
};

// --- App structure ---
const App = () => {
  return ThemeProvider({
    children: ThemeTogglerButton()
  });
};

// --- Entry point ---
function main() {
  console.log(App()); // Simulate rendering
  // In a real app, a button click would call toggleTheme
  ThemeContext.value.toggleTheme(); // Simulate a click
  console.log("After simulated click, new theme:", _themeState);
}

main();

Bila Hendak Menggunakan Konteks

Konteks amat sesuai untuk keadaan global, tetapi ia bukan pengganti keadaan komponen setempat atau penghantaran prop berantai bagi kes yang mudah.

Data Global: Gunakan untuk tema, pengesahan pengguna dan tetapan bahasa.
Elakkan untuk: Kemas kini yang kerap (boleh menyebabkan banyak pemaparan semula), atau keadaan yang hanya diperlukan oleh beberapa anak langsung.
Konteks Berasingan: Cipta konteks yang berbeza untuk bahagian keadaan global yang tidak berkaitan bagi mengelakkan pemaparan semula yang tidak diperlukan.

Konteks & Prestasi

Apabila value Konteks berubah, semua komponen yang menggunakan konteks tersebut (melalui useContext) akan dirender semula, walaupun komponen itu hanya menggunakan sebahagian daripada nilainya.

Untuk mengoptimumkan prestasi, anda boleh:

Memecahkan konteks besar kepada konteks yang lebih kecil dan berfokus.
Menghafal objek kompleks yang dihantar sebagai value bagi mengelakkan pemaparan semula pengguna yang tidak diperlukan.

Semakan Pantas Konteks

Antara pernyataan berikut tentang API Konteks React, yang manakah TRUE?

Jawab dalam pelajaran interaktif

Imbas Kembali: Konteks React

Anda telah mempelajari cara menggunakan API Konteks React untuk mengurus keadaan global!

createContext: Mencipta objek Konteks.
Context.Provider: Menyediakan data kepada anak melalui prop value.
useContext: Hook untuk menggunakan data Konteks dalam komponen fungsi.

Konteks berkuasa untuk berkongsi data seperti tema atau maklumat pengguna merentas aplikasi anda, sekali gus mengurangkan penghantaran prop berantai.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “API Konteks React” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “API Konteks React”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “API Konteks React”?

Gunakan API Konteks React untuk mengurus keadaan global dan berkongsi data merentas komponen dengan cekap. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “API Konteks React” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?

Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)