![React Context API Overview](https://img.php.cn/upload/article/000/000/000/172751874461346.jpg)
React Context API ialah ciri yang membolehkan anda berkongsi keadaan (data) merentas berbilang komponen tanpa menurunkan props secara manual pada setiap peringkat pepohon komponen. Ia memudahkan pengurusan negeri, terutamanya dalam aplikasi besar di mana banyak komponen memerlukan akses kepada data yang sama.
Konsep Utama:
-
Penciptaan Konteks:
Anda mencipta konteks menggunakan React.createContext().
const MyContext = React.createContext();
Salin selepas log masuk
-
Pembekal:
Komponen pembekal digunakan untuk membalut bahagian apl anda di mana anda mahu konteks boleh diakses. Ia menurunkan nilai konteks kepada anak-anaknya.
<MyContext.Provider value={someValue}>
{children}
</MyContext.Provider>
Salin selepas log masuk
-
Pengguna:
Komponen yang memerlukan akses kepada konteks boleh sama ada menggunakan Context.Consumer atau cangkuk useContext (lebih biasa dalam komponen berfungsi).
const someValue = useContext(MyContext);
Salin selepas log masuk
Contoh Penggunaan:
-
Buat konteks:
const ThemeContext = React.createContext();
Salin selepas log masuk
-
Sediakan konteks dalam komponen induk:
const App = () => {
const theme = 'dark';
return (
<ThemeContext.Provider value={theme}>
<ChildComponent />
</ThemeContext.Provider>
);
};
Salin selepas log masuk
-
Gunakan konteks dalam komponen kanak-kanak:
const ChildComponent = () => {
const theme = useContext(ThemeContext);
return <div>Current theme: {theme}</div>;
};
Salin selepas log masuk
Bila hendak menggunakan API Konteks:
-
Keadaan Global: Berguna untuk berkongsi keadaan yang perlu diakses oleh banyak komponen, seperti status pengesahan, tema atau tetapan bahasa.
-
Mengelakkan Penggerudian Prop: Membantu mengelakkan prop melalui berbilang lapisan komponen.
Atas ialah kandungan terperinci Gambaran Keseluruhan API Konteks React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!