Flutter有无状态类与State及生命周期详细介绍

下面是关于Flutter的无状态类与有状态类及其生命周期方法的详细介绍及示例：

Flutter有状态类和无状态类

Flutter中的类可以分为有状态和无状态两种。有状态的类可以通过修改自身的状态来动态改变其外观和行为，而无状态类则不具有这种能力。通常情况下，我们会在页面中使用有状态的类，而在内容单一或无需动态变化的组件中使用无状态的类。

无状态类

无状态类是指不需要维护状态的组件，它们通常是不可变的。无状态类中所有的属性都是final类型，一旦初始化后就无法更改。由于无状态类不需要维护状态，它的布局和渲染可以在每一次重绘时都完全重新执行，因此在性能上有一定的优势。

下面是一个简单的无状态组件示例，其中展示了一个文本和一张图片：

class StatelessPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("无状态组件示例"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "这是一个无状态组件",
              style: TextStyle(fontSize: 18),
            ),
            Image.network(
              "https://picsum.photos/250?image=9",
              width: 250,
            ),
          ],
        ),
      ),
    );
  }
}

有状态类

有状态类是指可以改变自身状态的组件，可以在运行时根据需要改变其外观或行为。在Flutter中，使用StatefulWidget和State类来创建有状态组件。StatefulWidget是一个可变的组件，而State则是一个不可变的对象，它持有可改变的部分。

对于一个有状态组件，其状态可以通过引用State对象来修改，在状态发生改变时，Flutter会自动调用build方法来重新渲染组件。这样可以保持UI与状态的同步，同时也可能导致重复渲染和性能问题。

下面是一个简单的有状态组件示例，其中展示了一个带计数器的按钮：

class StatefulPage extends StatefulWidget {
  @override
  _StatefulPageState createState() => _StatefulPageState();
}

class _StatefulPageState extends State<StatefulPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("有状态组件示例"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "按钮被点击了 $_counter 次",
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text("点击我"),
            ),
          ],
        ),
      ),
    );
  }
}

生命周期

在Flutter中，我们可以通过钩子（hook）函数来控制组件的生命周期，这些钩子函数包括：

• initState：在创建组件时调用，可以用来做一些初始化操作。
• build：每次状态发生变化时都会调用，用来构建组件的UI。
• didChangeDependencies：在build方法前调用，用来在依赖更改时更新状态，例如父级组件的数据变化可能会导致子组件的状态变化。
• setState：用来改变组件的状态，并触发UI重构。
• deactiving：在组件从树上移除时调用，通常可以用来取消定时器或停止动画等操作。
• dispose：在组件永久从内存中删除时调用，通常可以用来释放资源或取消与其它对象的连接。

下面是一个带有生命周期的有状态组件示例，其中我们在组件创建时注册了定时器，在组件销毁时取消了定时器：

class LifecyclePage extends StatefulWidget {
  @override
  _LifecyclePageState createState() => _LifecyclePageState();
}

class _LifecyclePageState extends State<LifecyclePage> {
  Timer _timer;

  @override
  void initState() {
    super.initState();
    print("initState");
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      print("Timer tick");
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies");
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      appBar: AppBar(
        title: Text("生命周期示例"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "生命周期示例",
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void deactivate() {
    print("deactivate");
    super.deactivate();
  }

  @override
  void dispose() {
    print("dispose");
    _timer.cancel();
    super.dispose();
  }
}

以上就是关于Flutter的无状态类与有状态类及其生命周期的详细介绍和示例说明。希望对你有所帮助。