面试题：Flutter中StatefulWidget生命周期之initState方法

Question

在Flutter的StatefulWidget中，initState方法有什么作用？请举例说明在这个方法中适合做哪些操作，以及为什么不能在initState方法中直接构建UI？

Answer 1

initState方法的作用

在Flutter的StatefulWidget中，initState方法是在State对象插入到树中时被调用的。它主要用于对State对象进行一次性的初始化操作。这个方法只会被调用一次，在State的生命周期中处于开始阶段。

适合在initState方法中做的操作举例

1. 初始化数据：

   class MyHomePage extends StatefulWidget {
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     List<String> dataList = [];
     @override
     void initState() {
       super.initState();
       // 模拟从网络或本地存储获取数据
       dataList = ['item1', 'item2', 'item3'];
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: ListView.builder(
           itemCount: dataList.length,
           itemBuilder: (context, index) {
             return ListTile(title: Text(dataList[index]));
           },
         ),
       );
     }
   }
   

   在上述代码中，在initState方法中初始化了dataList，这是一个适合在initState中进行的操作，因为它只需要在State对象首次插入树中时执行一次。
2. 启动异步任务：比如发起网络请求。

   class MyPage extends StatefulWidget {
     @override
     _MyPageState createState() => _MyPageState();
   }
   
   class _MyPageState extends State<MyPage> {
     List<dynamic> apiData = [];
     @override
     void initState() {
       super.initState();
       _fetchData();
     }
   
     Future<void> _fetchData() async {
       // 模拟网络请求
       await Future.delayed(Duration(seconds: 2));
       setState(() {
         apiData = [1, 2, 3];
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: ListView.builder(
           itemCount: apiData.length,
           itemBuilder: (context, index) {
             return ListTile(title: Text(apiData[index].toString()));
           },
         ),
       );
     }
   }
   

   这里在initState中启动了_fetchData异步任务来模拟获取网络数据，这种一次性的异步操作适合放在initState中。

不能在initState方法中直接构建UI的原因

1. 构建时机问题：initState方法调用时，State对象刚刚插入到树中，此时上下文环境可能还不完整，一些依赖于完整上下文的操作（如获取屏幕尺寸、访问主题等）可能无法正确执行。而build方法是在initState之后，并且在需要更新UI时会被调用，此时上下文环境是完整的，更适合构建UI。
2. 性能和职责分离：initState的职责是初始化，将UI构建放在build方法中遵循了单一职责原则，使代码结构更清晰。同时，如果在initState中构建UI，每次State对象插入树中都会重新构建UI，而build方法是按需调用的，这样可以避免不必要的UI重建，提高性能。