Flutter Hooks — 快速了解

news2025/1/13 10:01:07

Flutter Hooks — 快速了解

alt

前言

Hooks,直译过来就是"钩子",是前端 React 框架加入的特性,用来分离状态逻辑和视图逻辑。现在这个特性并不只局限在于 React 框架中,其它前端框架也在借鉴。

我们都知道在 FLutter 开发中的一大痛点就是业务逻辑和视图逻辑的耦合。这一痛点也是前端各个框架都有的痛点。所以大家就像出来各种办法来分离业务逻辑和视图逻辑,有 MVP,MVVM,React 中的 Mixin,高阶组件(HOC),直到 Hooks。Flutter 中大家可能对 Mixin 比较熟悉。

Mixin 的方式在实践中也会遇到一些限制:

  • Mixin 之间可能会互相依赖。
  • Mixin 之间可能存在冲突。

因此我们引入 Hooks 来看看能不能避免 Mixin 的这些限制。

正文

什么是 Flutter Hooks ?

Flutter Hooks 改进了你使用状态部件的方式。它在使用控制器时有一些市长的缺点。例如,如果您想要使用 AnimationController,您必须创建一个变量,调用 initState、 diUpdateWidget 并释放它。对于一个控制器来说,代码太多了。现在想象一下对多个控制器这样做。另外,必须使用每个类使用一次的 mix。现在,使用 Flutter Hooks,您只需要创建一个变量并调用一个函数,该函数存储所有逻辑。为了更好地描述它,让我们看一个比较:

alt

没有 Flutter Hooks

alt

有 Flutter Hooks

我想我们都同意,正确的代码要干净得多,即使它具有完全相同的功能。逻辑已经被移动到 useAnimationController。这样的函数叫做 Hook。在这个例子中,useAnimationController 是一个 Hooks 子,它构建在 Flutter Hooks 中。您可以在这里看到已经存在的 Hook 列表。

https://pub.dev/packages/flutter_hooks#existing-hooks

由于 Hooks 在 Flutter 是一个新生事物,它们也有一些特色。例如,它们只能在构建方法中使用,其中 Widget 混合了 Hook。Hook 的另一个伟大之处在于,它可以在一个构建中定义同一 Hook 的多种类型:

alt

在讨论“原则”之前,我想提到的最后一点是,Hook 完全独立于彼此和 widget 。它们甚至可以被提取到一个包中并发布到 Pub 。

Principle 原则

要理解 Hooks 是如何实现的,最好查看文档,因为我无法以任何方式更好地解释它:

与 State 类似,挂 Hooks 存储在 Widget 的 Element 中。但是,Element 存储的不是一个 State,而是一个 List < Hook > 。然后,为了使用 Hook,必须调用 Hook。

通过使用返回的 Hooks 子取决于它被调用的次数。第一个调用返回第一个 Hooks 子; 第二个调用返回第二个 Hooks 子,第三个调用返回第三个 Hooks 子,依此类推。

如果这个想法还不清楚,Hooks 子的本机实现可能看起来如下: [ ... ]

alt

来源: https://pub.dev/packages/flutter_hooks#principle

Rules 规则

现在让我们谈谈如何使用 Flutter Hooks 的最佳方式。当遵循这些步骤时,其他人将能够更好地理解您的代码,而您将总是知道您在那里做了什么。那我们就开始吧。

    1. 在每个 Hooks 子前面加上 use
alt
    1. 无条件调用 Hook
alt
    1. 不要在有问题的情况下包装 Hooks 子
alt

遵守这些规则时,你总是处于安全的一方 ^ ^

Using hot reaload 热更新

HookWidget 重写默认的热重载行为以使用 Hooks 子。这就是为什么热重载不会破坏应用程序,即使 Hooks 子是从它们的索引中获得的。但和往常一样,有几件事情需要考虑:

alt

创建自定义 Hooks

如前所述,有许多现有的 Hooks 子,但是如果您想创建自己的 Hooks 子呢?有两种方法:

    1. 使用函数

这是编写 Hooks 子最常用的方法。您甚至可以将多个 Hooks 子组合成一个更复杂的 Hooks 子。由于 Hooks 子的性质,这可以做到,因为 Hooks 子是可组合的。让我们定义一个 Hooks 子,它创建一个变量,并在每次值发生变化时将值打印到控制台:

alt
    1. 使用一个 class

当 Hooks 子变得太复杂时,通常使用类。在这里,我们可以定义另一个规则或良好做法。尝试将类隐藏在如下函数下:

alt

这个 Hooks 子现在可以显示一个国家在其处置上存活的总时间:

alt

结束语

如果本文对你有帮助,请转发让更多的朋友阅读。

也许这个操作只要你 3 秒钟,对我来说是一个激励,感谢。

祝你有一个美好的一天~


© 猫哥

  • 微信 ducafecat

  • https://wiki.ducafecat.tech

  • https://video.ducafecat.tech

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/10736.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

图解 | 监控系统 Prometheus 的原理

本篇将会以图解的方式剖析 Prometheus 的原理。本文主要内容如下&#xff1a; 一、Prometheus 是什么&#xff1f; ELK Stack 日志收集和检索平台想必大家应该比较熟悉&#xff0c;Elasticsearch Filebeat Logstash Kibana。 ELK 架构 而 Prometheus 就相当于一整个 ELK&a…

功率放大器的主要指标有哪些呢

功率放大器是电子测量行业比较常见的能够放大信号源电压信号的仪器&#xff0c;虽然功率放大器的应用十分广泛&#xff0c;但是很多人对于功率放大器的主要指标参数还不了解&#xff0c;就让安泰电子来为大家介绍功率放大器的主要指标。 功率放大器的核心参数指标包括带宽、电压…

python多线程返回值问题重写Thread类的run方法

python多线程使用 文章目录python多线程使用一、案例二、说明1、针对第一种是有返回值的 &#xff0c;可以通过future.result() 去拿到每个线程返回值2、无返回值问题3、我们可以重写这个Thread类重写了__init__、run方法和join方法&#xff0c;主要是start()涉及的方法太多了而…

Redis篇(5)——持久化

持久化 RDB 1、save会阻塞所有命令。而bgsave则不能与其他持久化命令同时执行 2、自动rdb的发起&#xff1a;servercorn默认每100ms执行一次&#xff0c;根据redisserver里面记录的dirty&#xff08;上次save后修改的次数&#xff09;和lastsave&#xff08;上次save的时间&a…

sklearn基础篇(七)-- 随机森林(Random forest)

上一节我们提到决策树的一个主要缺点在于经常对训练数据过拟合。随机森林是解决这个问题的一种方法。随机森林是属于集成学习&#xff0c;其核心思想就是集成多个弱分类器以达到一个强分类器的效果。 1 bagging的原理 随机森林采用Bagging的思想&#xff0c;所谓的Bagging可以…

HDFS的高级功能

3.6 HDFS的高级功能 3.6.1 安全模式 安全模式&#xff08;Safemode&#xff09;是HDFS所处的一种特殊状态。处于这种状态时&#xff0c;HDFS只接受读数据请求&#xff0c;不能对文件进行写、删除等操作。安全模式是保证一个系统保密性、完整性及可使用性的一种机制&#xff0…

精彩回顾:CACTER邮件数据防泄露EDLP亮相2022世界互联网大会

2022年世界互联网大会乌镇峰会于11月11日胜利闭幕。 本届峰会是世界互联网大会国际组织成立后的首届年会&#xff0c;以“共建网络世界 共创数字未来—携手构建网络空间命运共同体”为主题&#xff0c;共设置1场全体会议和20场分论坛&#xff0c;围绕全球网络空间热点问题展开讨…

【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境

本系列已更新文章&#xff1a; 分享一个实用的 vite vue3 组件库脚手架工具&#xff0c;提升开发效率 开箱即用 yyg-cli 脚手架&#xff1a;快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo Vue3 企业级优雅实战 - 组件库框架…

线程池相关总结

多线程之线程池总结 1. 概述&#xff1a; 线程池&#xff08;Thread Pool&#xff09;&#xff1a;把一个或多个线程通过统一的方式进行调度和重复使用的技术&#xff0c;统一管理&#xff0c;避免了因线程过多而带来使用上的开销和不可控。 作用&#xff1a; 降低资源消耗…

SpringBoot进阶学习(二)---配置高级

第三方bean属性绑定 在要绑定的类上添加ConfigurationProperties(prefix “”)&#xff0c;prefix为对应的配置类中的内容&#xff0c;在添加注解ConfigurationProperties时候会产生错误&#xff0c;如&#xff1a; 这时候添加依赖&#xff1a; <dependency><groupI…

计算机网络 5 - 链路层

第6章 链路层和局域网(Link Layer and LANs)6.2 差错检测 和 纠正奇偶校验校验和CRC 循环冗余校验6.3 多路访问协议信道划分 MAC协议随机存取MAC协议6.4 LAN 局域网MAC地址 和 ARP无效的MAC帧格式Ethernet 以太网交换机第6章 链路层和局域网(Link Layer and LANs) 6.2 差错检测…

H5基本开发1——(H5简单概述)

html概述 HTML是用来描述网页的一种语言 HTML指的是超文本标记语言Hyper Text Markup Language&#xff0c;是一种用于创建网页的标准标记语言 标记语言是一套标记标签markup tag HTML使用标记标签来描述网页 HTML文档的后缀名&#xff1a;.html或者.htm&#xff0c;两种后缀名…

Deep Leakage from Gradients

Summary 对于分布式学习&#xff0c;特别是相关之前共享梯度的学习&#xff0c;提出了一种攻击方式&#xff08;DLG&#xff09;。通过窃取client之间传递的梯度反推出&#xff08;也是使用机器学习迭代的方式&#xff09;原始的输入。并在图像分类、Masked Language Model方面…

代谢ADMET在线网页预测工具SwissADME 、SOMP 、BioTransformer

药物代谢(Drug Metabolism)指药物在体内多种药物代谢酶&#xff08;尤其肝药酶&#xff09;的作用下&#xff0c;化学结构发生改变的过程&#xff1b;包括分解代谢和合成代谢 1、概念 药物的代谢反应大致可以分为氧化(oxidation)、还原(reduction)、水解(hydrolysis)和结合(co…

Android 增加布局圆角功能,支持背景裁切圆角

前言 我们Android开发同学最常见、频繁画UI时会遇到有角度的布局。例如: 通常,我们都会在drawble文件夹下创建Shape.xml去实现对吧?当然这样的代码实现方式没毛病。但是,项目大了业务繁杂,工程中会出现很多此类文件,显得非常臃肿,而且不方便复用,不利于研发效率…

22、7大参数自定义线程池(核心线程数,最大核心线程数。。。拒绝策略(4种))

7大参数自定义线程池&#xff08;核心线程数&#xff0c;最大核心线程数。。。拒绝策略&#xff08;4种&#xff09;&#xff09; 第一步&#xff1a;我们首先看单例线程池的源码 第二步&#xff1a;多个固定线程的线程池源码 第三步&#xff1a;可变的线程数的线程池源码 开启…

相控阵天线(三):直线阵列低副瓣综合(切比雪夫、泰勒分布、SinZ-Z和Villeneuve分布)

目录阵列天线综合方法概述切比雪夫阵列综合泰勒阵列综合高斯分布、二项式分布、SinZ-Z和Villeneuve分布切比雪夫、泰勒和Villeneuve综合比较切比雪夫、泰勒和Villeneuve分布的口径效率比较切比雪夫综合python代码示例阵列天线综合方法概述 直线阵列天线的综合是在预先给定辐射…

C++15 ---继承2:重载与覆盖、隐藏、拷贝构造函数、赋值运算符重载、静态数据成员

一、重载与覆盖的特征 1、重载 成员函数被重载的特征: (1&#xff09;相同的范围&#xff08;在同一个类中)&#xff1b; (2&#xff09;函数名字相同&#xff1b; (3&#xff09;参数不同&#xff1b; (4&#xff09; virtual关键字可有可无。 2、覆盖 覆盖是指派生类函数…

STM32CubeMX环境安装(保姆级)

目录 JAVA环境安装 安装包 文件夹设置 运行exe STM32CubeMX下载 第一步 第二步 第三步 第四步 第五步 第六步 第七步 第八步 注意&#xff0c;我们使用STM32CubeMX需要安装JAVA环境&#xff01;&#xff01;&#xff01; JAVA环境安装 安装包 JAVA下载链接&…

《FFmpeg Basics》中文版-02-显示帮助和功能

正文 关于FFmpeg程序的帮助和其他信息都显示在空格和连字符之后输入的各种选项&#xff0c;示例显示了FFmpeg工具的用法&#xff0c;但是相同的选项对于ffplay、ffprobe和ffserver是有效的。参数是区分大小写的。FFmpeg组件的开发速度很快&#xff0c;从2012年11月开始&#x…