Context ve hooks
- React Native kursu
- Orta seviye
- Ders 113/116
- 6 dk
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.
Başlangıç kodu
import React, { useState, createContext, useContext } from 'react';
import { Text } from 'react-native';
// TasksContext oluştur (createContext ile)
// useTasks hook'unu yaz (useContext ile)
function App() {
const [tasks, setTasks] = useState([]);
return <Text>Görevler</Text>;
}Örnek çözüm
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>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 createContext çağrısı
const TasksContext = ____();const TasksContext = createContext();Açıklama: createContext yeni bir context oluşturur.
2 useTasks hook'u ne döndürür?
const { tasks } = useTasks();- Context değerini Doğru cevap
- Bir context
- Bir state
- Bir dizi
Açıklama: useTasks context değerini döndürür.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
TasksContext |
Context tanımı |
Provider |
Değeri sağlar |
useTasks |
Değeri okur |
value |
Paylaşılan veri |