在flutter中使用hooks的简单使用

flutter中的生命周期管理相对没有Vue、react这种前端框架强，只有init、dispose、didUpdateWidget,没有类似vue中watch这种，或是react hooks。

我一直在想能否在flutter中使用hooks？直到今天偶然间发现一个项目：flutter_hooks.

先尝试一下useState和useEffect:

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

class UseStateDemo extends HookWidget {
  // 注意需要在HookWidget中使用 ！

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // 这里和react的写法略有不同
    final counter = useState(0);
   
    useEffect(() {
      print('learn hooks : ${counter.value}');
    }, [counter.value]);  // 这里需要监控到具体的值的变化

    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('counter: ${counter.value}'),
          MaterialButton(
            onPressed: () => counter.value++,
            child: Text(
              'counter +'
            ),
          )
        ],
      ),
    );
  }
}

接下来建一个最简单custom Hooks：

import 'package:flutter_hooks/flutter_hooks.dart';


void customHooks () {
  useEffect(() {
    print('custom hooks !');
  }, []);
}

在上面的代码中加入custom hooks：

...
import 'customHooks.dart';

class UseStateDemo extends HookWidget {

  @override
  Widget build(BuildContext context) {
    ...
    customHooks();
    ...
  }
}

点击counter +: 输出：

flutter: learn hooks : 0
flutter: custom hooks !
flutter: learn hooks : 1
flutter: learn hooks : 2