【Flutter 工程】003-钩子函数：Flutter Hooks

我就是我 2023-10-10 22:50 4阅读 0赞

## 【Flutter 工程】003-钩子函数：Flutter Hooks ##

#### 文章目录 ####

*  【Flutter 工程】003-钩子函数：Flutter Hooks
 *  一、概述
 *   *  1、前言
     *  2、Flutter Hooks 概述
 *  二、\`useState\` 基本使用
 *   *  0、计数器官方 demo
     *  1、安装 flutter\_hooks
     *  2、代码改造
     *  3、运行结果
     *  4、神奇的事情
 *  三、使用 \`HookBuilder\` 实现更小范围的组件更新
 *   *  1、简单分析
     *  2、使用 \`HookBuilder\` 实现更小范围的组件更新
     *   *  代码改造
         *  运行结果
         *  控制台

## 一、概述 ##

### 1、前言 ###

Hooks 是 React 框架中引入的一项特性，用来分离**状态逻辑和视图逻辑**。如今，这个概念已经不仅限于 React，其他前端框架也在学习和借鉴。在 Flutter 开发中，业务逻辑和视图逻辑的耦合一直是一个比较突出的**痛点**，这也是各大前端框架常遇到的一个共性难题。为了解决这个问题，前端社区提出了许多方案，如MVP、MVVM、React 的Mixin、高阶组件(HOC)，以及Hooks。在Flutter中，开发者可能对Mixin比较熟悉。但是，Mixin的应用也存在一定的局限性：

*  Mixin 之间可能互相依赖，导致依赖关系混乱；
 *  Mixin 之间可能产生冲突，难以识别和解决；
 *  Mixin的可复用性有限，不利于组件解耦。

基于此，本文将介绍 Hooks 的概念和应用，看是否能够避免 Mixin 的这些限制，实现更好的状态逻辑和视图逻辑的解耦。Hooks 为我们提供了一种**无需修改组件结构**的方式来**复用状态逻辑**。我们可以通过 Hooks 将复杂的状态逻辑抽离出来，这有助于提高组件的内聚性，实现高度可复用的状态逻辑。

### 2、Flutter Hooks 概述 ###

**Flutter Hooks**是一个用于 Flutter 应用程序的第三方包，它提供了一种优雅且方便的方式来管理 Flutter 小部件的**状态和生命周期**。

在Flutter中，通常使用 **StatefulWidget** 来管理具有可变状态的小部件。然而，使用 StatefulWidget 可能会导致代码冗长，因为需要创建一个单独的**State类**来管理状态，并且需要在小部件和状态之间进行**额外的通信**。

Flutter Hooks通过使用**钩子（hooks）的概念，提供了一种更简洁的方式来管理小部件的状态**。钩子是一些函数，可以在小部件函数内部调用，它们提供了一种轻量级的状态管理机制。

使用Flutter Hooks，您可以在无需创建 StatefulWidget 的情况下管理状态。它提供了一些常用的钩子函数，例如**useState**（用于管理状态）、**useEffect**（用于处理生命周期）、**useMemo**（用于记忆计算结果）和**useCallback**（用于记忆回调函数）。这些钩子函数使得管理小部件的状态和副作用变得更加简单和直观。

除了内置的钩子函数，Flutter Hooks还提供了自定义钩子函数的能力，以便您可以根据应用程序的需求创建自己的钩子。

总的来说，**Flutter Hooks**是一个强大而灵活的库，可以帮助开发者更好地组织和管理Flutter应用程序中的小部件状态和生命周期。它可以提高代码的可读性和可维护性，并且减少了使用传统的 StatefulWidget 时的样板代码量。

## 二、`useState` 基本使用 ##

### 0、计数器官方 demo ###

> 去掉了注释！

import 'package:flutter/material.dart';
    
    void main() {
        
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
        
      const MyApp({
        super.key});
    
      @override
      Widget build(BuildContext context) {
        
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
        
      const MyHomePage({
        super.key, required this.title});
    
      final String title;
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
        
      int _counter = 0;
    
      void _incrementCounter() {
        
        setState(() {
        
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        );
      }
    }

### 1、安装 flutter\_hooks ###

flutter pub add flutter_hooks

### 2、代码改造 ###

import 'package:flutter/material.dart';
    import 'package:flutter_hooks/flutter_hooks.dart';
    
    void main() {
        
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
        
      const MyApp({
        super.key});
    
      @override
      Widget build(BuildContext context) {
        
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    // 关注：继承自 HookWidget
    class MyHomePage extends HookWidget {
        
      const MyHomePage({
        super.key, required this.title});
    
      final String title;
    
      @override
      Widget build(BuildContext context) {
        
        // 关注：使用 useState
        final counter = useState(0);
        print("执行时间：" + DateTime.now().toString() + "  counter.value = " + counter.value.toString());
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                // 关注：使用 counter.value
                Text(
                  '${counter.value}',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            // 关注：使用 counter.value ++
            onPressed: () => counter.value++,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        );
      }
    }

### 3、运行结果 ###

![image-20230526130958068][]

### 4、神奇的事情 ###

> hook 的实现原理这里暂不探讨，可参考文章：https://juejin.cn/post/7220295071060541495

*  `counter` 的值更新了，也重新执行了 `build` 方法，但是 `counter` 变量的值并没有被重新初始化，而是实现了复用！
    
    >     Syncing files to device Windows...
    >     flutter: 执行时间：2023-05-26 13:14:56.030115  counter.value = 14
    >     Reloaded 1 of 668 libraries in 168ms (compile: 23 ms, reload: 62 ms, reassemble: 49 ms).
    >     flutter: 执行时间：2023-05-26 13:15:12.404470  counter.value = 15
 *  没有 State 代码，HookWidget 是继承 StatelessWidget
    
    >     abstract class HookWidget extends StatelessWidget {
    >            
    >      /// Initializes [key] for subclasses.
    >      const HookWidget({
    >            Key? key}) : super(key: key);
    >     
    >      @override
    >      _StatelessHookElement createElement() => _StatelessHookElement(this);
    >     }

## 三、使用 `HookBuilder` 实现更小范围的组件更新 ##

### 1、简单分析 ###

上述示例中，发生变化的仅仅是 count 的值，需要更新的也只是一个 Text 组件的文本，但由于 count 的值的更新却导致整个页面的重建，这是不合理的！

传统的解决方案是将 Text 单独封装，但这徒增了很多代码！flutter\_hooks 提供了 `HookBuilder` 来实现这个需求！

### 2、使用 `HookBuilder` 实现更小范围的组件更新 ###

#### 代码改造 ####

> 这里做一个简单示例来展示基本用法，不纠结极客风格的代码！

import 'package:flutter/material.dart';
    import 'package:flutter_hooks/flutter_hooks.dart';
    
    void main() {
        
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
        
      const MyApp({
        super.key});
    
      @override
      Widget build(BuildContext context) {
        
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    // 关注：继承自 HookWidget
    class MyHomePage extends HookWidget {
        
      const MyHomePage({
        super.key, required this.title});
    
      final String title;
    
      @override
      Widget build(BuildContext context) {
        
        print("外层 build 执行时间：" + DateTime.now().toString());
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(title),
          ),
          // 关注：使用 HookBuilder
          body: HookBuilder(
            builder: (context) {
        
              print("内层 build 执行时间：" + DateTime.now().toString());
              final counter = useState(0);
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text(
                      'You have pushed the button this many times:',
                    ),
                    // 关注：使用 counter.value
                    Text(
                      '${counter.value}',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                    FloatingActionButton(
                      // 关注：使用 counter.value ++
                      onPressed: () => counter.value++,
                      tooltip: 'Increment',
                      child: const Icon(Icons.add),
                    ),
                  ],
                ),
              );
            },
          ),
        );
      }
    }

#### 运行结果 ####

![image-20230526134057742][]

#### 控制台 ####

Syncing files to device Windows...
    flutter: 外层 build 执行时间：2023-05-26 13:40:46.152943
    flutter: 内层 build 执行时间：2023-05-26 13:40:46.182019
    flutter: 内层 build 执行时间：2023-05-26 13:40:49.101309
    flutter: 内层 build 执行时间：2023-05-26 13:40:49.297099
    flutter: 内层 build 执行时间：2023-05-26 13:40:49.644307

[image-20230526130958068]: https://img-blog.csdnimg.cn/img_convert/5293fd666b77225fc5a79e5d85498ab4.png
[image-20230526134057742]: https://img-blog.csdnimg.cn/img_convert/70c4b41c26923888927ffa481df24a5e.png