State ve performans
- Flutter kursu
- Orta seviye
- Ders 4/99
- 4 dk
setState'in maliyetini ve neyi rebuild edeceğini öğrenirsin.
setState'in maliyeti
Her setState çağrısı, ilgili widget'ın alt ağacını (subtree) yeniden inşa eder. Yani build metodu yeniden çalışır ve widget ağacı yeniden oluşturulur.
setState(() { _sayac++; });
// yalnızca bu widget'ın alt ağacı
// rebuild edilirEbeveyn widget'lar etkilenmez.
Rebuild kapsamı
setState yalnızca o State'e ait widget'ı yeniden inşa eder; ebeveyn widget'ların build metodu çağrılmaz. Bu yüzden büyük widget ağaçlarında state'i mümkün olduğunca aşağıya tutmak performansı artırır.
class Buyuk extends StatelessWidget {
Widget build(BuildContext context) {
// Buyuk rebuild olmaz
return Kucuk();
}
}State'i küçük bir subtree'te tutarsan rebuild maliyeti düşer.
Uygulama Ebeveyn stateless, çocuk stateful sayaç
Ebeveyn stateless bir widget olsun. Sayac stateful widget'ı _sayac tutsun ve initState'te print('Sayac oluşturuldu') çağırsın. Butona basıldığında setState ile _sayac'ı artır.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ebeveyn());
}
}
class Ebeveyn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Sayac()),
);
}
}
class Sayac extends StatefulWidget {
@override
_SayacState createState() => _SayacState();
}
class _SayacState extends State<Sayac> {
int _sayac = 0;
@override
void initState() {
super.initState();
print('Sayac oluşturuldu');
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('$_sayac'),
ElevatedButton(
// setState ile _sayac'ı artır
onPressed: () {},
child: Text('Artır'),
),
],
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ebeveyn());
}
}
class Ebeveyn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Sayac()),
);
}
}
class Sayac extends StatefulWidget {
@override
_SayacState createState() => _SayacState();
}
class _SayacState extends State<Sayac> {
int _sayac = 0;
@override
void initState() {
super.initState();
print('Sayac oluşturuldu');
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('$_sayac'),
ElevatedButton(
onPressed: () {
setState(() {
_sayac++;
});
},
child: Text('Artır'),
),
],
);
}
}Beklenen çıktı
Sayac oluşturuldu
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 setState çağrıldığında hangisi yeniden inşa edilir?
- setState tüm uygulamayı yeniden inşa eder
- setState ebeveyn widget'ı yeniden inşa eder ama çocukları etkilemez
- setState yalnızca o State'in alt ağacını yeniden inşa eder Doğru cevap
- setState hiçbir şeyi yeniden inşa etmez
Açıklama: setState yalnızca o State'e ait widget'ı ve alt ağacını yeniden inşa eder; ebeveynlerin build metodu çağrılmaz.
2 setState'ten sonra hangi metod çalışır
class _MyState extends State<MyWidget> {
int x = 0;
@override
Widget ____(BuildContext context) {
return Text('$x');
}
}class _MyState extends State<MyWidget> {
int x = 0;
@override
Widget build(BuildContext context) {
return Text('$x');
}
}Açıklama: setState, State'i dirty işaretler ve sonraki frame'de build metodu yeniden çağrılır; ebeveynin build'i çağrılmaz.
3 Rebuild ve performans parçaları
| Kavram | Anlamı |
|---|---|
setState |
Yalnızca o State'in alt ağacını yeniden inşa eder |
Subtree |
Bir widget'ın kendisi ve tüm çocukları |
Büyük ağaçta state aşağıda |
Rebuild maliyetini düşürür |
Ebeveyn widget |
setState'ten etkilenmez |