# 03.状态管理

### 前言

Flutter 的渲染模式是 增量渲染 ，当一部分有变化的时候就将原先的替换掉。所以页面元素没有必要拥有状态。但是这样对于时机开发并不友好，尤其对于数据驱动的复杂的页面。

这样就出现了 `有状态的Widget` ：数据逻辑与渲染逻辑拆分开来，数据保留，页面增量渲染。

### StatefulWidget

在我们需要可变数据驱动的Widget时，需要两个重要的部分：由数据驱动渲染。

![1](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-5484acee5124236e74addc5264558f2c6b7d73fd%2F03-01.png?alt=media)

```
import 'package:flutter/material.dart';

// 渲染逻辑
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _MyStateDataSource();
  }
}

// 数据逻辑
class _MyStateDataSource extends State<MyStatefulWidget> {
  int _clickCount = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: FloatingActionButton(
        child: Text("$_clickCount"),
        onPressed: () {
          setState(() {// 触发状态改变，重新渲染
            _clickCount += 1;
          });
        },
      ),
    );
  }
}
```

### 增量渲染

你可能会想，改动一个小数据整个Widget都重新渲染，效率是不是很低啊？

不用担心这里采用的是增量渲染，通过树状的结构实现只修改使用到对应数据的叶子Widget。