React Native
Context ve hooks
Context ve custom hook'larla veri yönetimini kurarsın.
Context ile paylaş
Bu derste tasks state'ini tüm bileşenlere açacağız. Context, prop drilling olmadan veriyi ağacın derinliklerine taşır. TasksContext oluşturur, App'i TasksContext.Provider ile sararız.
Provider'a value={{ tasks, setTasks }} veririz; bu değer tüm alt bileşenlerde ulaşılabilir olur. Bir useTasks hook'u yazarak context'i okumayı standart hale getiririz: export function useTasks() { return useContext(TasksContext); }. Böylece her bileşen const { tasks } = useTasks() ile verilere erişir. Bu desen, orta ve büyük uygulamaların temelidir.
useTasks hook'u
useTasks, useContext'i saran bir özel hook'tür. export function useTasks() { return useContext(TasksContext); } yazarak tanımlarsın. Her bileşen bu hook'u çağırıp tasks ve setTasks'e erişir.
Bu desen iki avantaj sağlar. Birincisi, her çağrı yeri tek satırla sadeleşir: const { tasks } = useTasks(). İkincisi, ileride context değerine yeni alan eklersen yalnızca hook'u güncellersin; her çağrı yeri otomatik faydalanır. Özel hook'lar, bileşen mantığını yeniden kullanılabilir parçalara ayırır. Bu yüzden orta seviye projelerde context'i her zaman bir hook ile sarmak iyi bir alışkanlıktır.
Uygulama Provider ile sar
Bir TasksContext oluştur (createContext() ile). useTasks hook'unu yaz (useContext ile). App'in dönüşünü <TasksContext.Provider value={{ tasks, setTasks }}> ile sar; içine <Text>Görevler</Text> koy.
Örnek çözümü göster
import React, { useState, createContext, useContext } from "react";
import { Text } from "react-native";
const TasksContext = createContext();
export function useTasks() {
return useContext(TasksContext);
}
function App() {
const [tasks, setTasks] = useState([]);
return (
<TasksContext.Provider value={{ tasks, setTasks }}>
<Text>Görevler</Text>
</TasksContext.Provider>
);
}
Kendini test et
-
createContext çağrısı
const TasksContext = ____();
Cevabı göster
const TasksContext = createContext();
-
useTasks hook'u ne döndürür?
const { tasks } = useTasks();
- Context değerini
- Bir context
- Bir state
- Bir dizi
Cevabı göster
Context değerini — useTasks context değerini döndürür.
-
Parçayı rolüne eşle
- TasksContext
- Context tanımı
- Provider
- Değeri sağlar
- useTasks
- Değeri okur
- value
- Paylaşılan veri
Sıradaki ders: API entegrasyonu
