在 Flutter 中使用 setState 時的 6 個簡單技巧
highlight: github theme: vue-pro
setState 函式是在 Flutter 應用程式中管理狀態的最基本方法。以下是一些保持應用可維護性的最佳實踐。
StatefulWidget 的 setState 函式是一種在 Flutter 應用程式中管理狀態的簡單方法。但是，當您希望您的應用程式正常工作和高效能時，您需要避免幾個陷阱。以下是您應該堅持的一些最佳實踐。
setState 有什麼用？
setState 是Flutter發出 rebuild （重建）當前 widget 及其後代的方式。在 rebuild 過程中，最新的變數值將被用於建立使用者介面。比方說，一個使用者將一個開關從開啟切換到關閉。該開關有一個儲存該值的支援變數，所以在改變之後，它被設定為 false。開關本身並不反映這一變化，直到它被重建為新的支援欄位值。
- 更改值
- 呼叫 setState()
- 使用者介面已更新
💡技巧 1：保持## widgets小！
setState 觸發了對你當前所在的小元件的重建。如果你的整個應用程式只包含一個widget，那麼整個widget將被重建，這將使你的應用程式變得緩慢。請看下面的例子。
```dart import 'package:flutter/material.dart';
class Home extends StatefulWidget { const Home({Key? key}) : super(key: key);
@override
State
class _State extends State
@override
Widget build(BuildContext context) {
print("built method Home"); // <-- setState triggers build here!
return Scaffold(
appBar: AppBar(title: const Text("Demo")),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children:
這裡我們在一個 Column 中有 5 個 SwitchListTile 小部件，它們都是同一個小部件的一部分。
如果您切換任何控制元件，整個螢幕都會被重建。 Scaffold, AppBar, Column, ... 但只要重建已更改的小部件就足夠了。讓我們看下一個程式碼示例：
```dart import 'package:flutter/material.dart';
class Home2 extends StatefulWidget { const Home2({Key? key}) : super(key: key);
@override
State
class _State extends State
class Switch extends StatefulWidget { const Switch({Key? key}) : super(key: key);
@override
State
class _SwitchState extends State
@override Widget build(BuildContext context) { print("build method Switch"); // <-- setState triggers build here! return SwitchListTile( activeColor: Colors.green, inactiveThumbColor: Colors.red, title: Text("Switch is ${value ? "on" : "off"}"), value: _value, onChanged: () { setState(() { _value = !_value; }); }); } } ```
在這裡，我們將 SwitchListTile 包裝在單個 StatefulWidget 中。頁面看起來相同，但如果您單擊此示例中的任何開關，則只有單擊的小部件將重建。
💡技巧 2：不要在構建方法中呼叫 setState
這個方法有可能在每一幀中被呼叫，除了建立一個小部件外，不應該有任何副作用。
build 方法旨在構建小部件樹，因此我們應該保持這種方式。不要在這裡做花哨的事情，它會減慢你的應用程式。對setState的呼叫可能會觸發額外的重建，在最壞的情況下，你可能最終會出現一個異常，告訴你目前有一個重建正在進行。
💡技巧 3：不要在 initState 方法中呼叫 setState
initState 將在完成後觸發重建，因此無需在此方法中呼叫 setState。此方法旨在初始化與狀態相關的屬性，例如設定預設值或訂閱流。不要在這裡做任何其他事情！
💡技巧4：setState()和setState(...)是相等的
像這樣使用 setState 沒關係
dart
setState((){
_text = “Hello”;
});
或者像這樣
dart
_text = “Hello”;
setState((){});
結果是一樣的。
💡技巧 5：setState(...) 程式碼必須很小
不要在setState內做任何大的計算，因為它將阻止你的應用程式重繪。請看下面的示例程式碼：
dart
setState(() {
for (var i = 0; i < 10000; i++) print(i);
_value = true;
});
只有在列印語句之後，小部件才會重建。在這段時間裡，你的應用程式不會對使用者的操作做出反應，它將在之後執行這些操作。因此，如果使用者因為沒有視覺反饋而多次點選一個控制元件，多次重建就會堆積起來，會使應用程式的速度更慢。
一個更好的方法是在執行一個長期執行的操作時顯示一個進度指示器，這樣使用者就知道正在發生一些事情，他需要等待完成。
💡技巧 6：setState(...) 程式碼不能是非同步的
執行程式碼時
dart
setState(() async {
await Future.delayed(const Duration(seconds: 5));
});
你最終會得到一個類似這樣的異常資訊：
在方法之外執行非同步操作，然後呼叫它。
結束
我希望這些見解能幫助你更好地理解Flutter中setState的機制。堅持這些技巧，你會有更少的問題和更快的應用程式。原始碼例子可以在GitHub上找到。
原文：http://levelup.gitconnected.com/6-easy-tips-when-working-with-setstate-in-a-flutter-application-3d629bc77a16
作者：xeladu
- 如何使用 GitHub 討論作為您部落格的聊天系統
- 在 Flutter 中使用 setState 時的 6 個簡單技巧
- 譯|你應該知道的 7 個 GitHub 功能
- 提高 VS Code 編輯器效能的 5 個技巧
- urlcat：JavaScript的URL構建器庫
- 8 個 Vue.js UI 元件，說不定用得上！
- 20個你應該瞭解的Flutter庫
- Github Actions還是Jenkins？該怎麼選？
- 如何使用CSS和JS建立“前後”影象比較效果
- 什麼是WebAuthn：在Web上使用Touch ID和Windows Hello登入
- 2021年管理Monorepo程式碼庫的11種出色工具
- 僅使用CSS就可以提高頁面渲染速度的4個技巧
- 實現高效能延遲載入的最新API：Intersection Observer
- 如何在React應用中實現“使用GitHub登入”
- 什麼是2021年最佳的後端開發框架？
- 自動增長Textareas的最乾淨技巧
- MongoDB Mongoose與Node.js結合使用的後端開發的最佳實踐
- Vite使Vue CLI過時了嗎？
- API怎麼選？比較SOAP、REST、GraphQL和RPC
- 開源推薦|10個驚人的復古CSS套件