首页 > 其他分享 >视图开发 命令式 声明式 将视图和数据分离

视图开发 命令式 声明式 将视图和数据分离

时间:2023-09-02 18:44:56浏览次数:44  
标签:控件 Widget 视图 命令式 World 声明 Hello 文案

10 | Widget中的State到底是什么? https://time.geekbang.org/column/article/108576

 下述代码分别展示了在 Android、iOS 及原生 Javascript 中,如何将一个文本控件的展示文案更改为 Hello World:

// Android设置某文本控件展示文案为Hello World
TextView textView = (TextView) findViewById(R.id.txt);
textView.setText("Hello World");

// iOS设置某文本控件展示文案为Hello World
UILabel *label = (UILabel *)[self.view viewWithTag:1234];
label.text = @"Hello World";

// 原生JavaScript设置某文本控件展示文案为Hello World
document.querySelector("#demo").innerHTML = "Hello World!";

 

 

与此不同的是,Flutter 的视图开发是声明式的,其核心设计思想就是将视图和数据分离,这与 React 的设计思路完全一致。

对我们来说,如果要实现同样的需求,则要稍微麻烦点:除了设计好 Widget 布局方案之外,还需要提前维护一套文案数据集,并为需要变化的 Widget 绑定数据集中的数据,使 Widget 根据这个数据集完成渲染。

 但是,当需要变更界面的文案时,我们只要改变数据集中的文案数据,并通知 Flutter 框架触发 Widget 的重新渲染即可。这样一来,开发者将无需再精确关注 UI 编程中的各个过程细节,只要维护好数据集即可。比起命令式的视图开发方式需要挨个设置不同组件(Widget)的视觉属性,这种方式要便捷得多。

 

总结来说,命令式编程强调精确控制过程细节;而声明式编程强调通过意图输出结果整体。对应到 Flutter 中,意图是绑定了组件状态的 State,结果则是重新渲染后的组件。在 Widget 的生命周期内,应用到 State 中的任何更改都将强制 Widget 重新构建。

 

 

 

 

翻译

搜索

复制

标签:控件,Widget,视图,命令式,World,声明,Hello,文案
From: https://www.cnblogs.com/papering/p/17674038.html

相关文章

  • ORA-01031: insufficient privileges 19c跨用户视图查询 with grant option
    问题概述某客户从11.2.0.1升级迁移到19.16版本后,应用反应部分查询功能无法使用报无权限,数据库中增加了ORA-01031:insufficientprivileges跟踪event进行分析问题复现创建三个测试用户createusertest1identifiedbyoracle123;createusertest2identifiedbyoracle123;......
  • 16、C++ primer 变量声明和定义的关系P41
    1、什么是分离式编译?分离式编译(SeparateCompilation)是一种软件开发技术,用于将一个大型的程序分割成多个独立的源代码文件,并分别进行编译。每个源代码文件通常包含一个模块、类、函数或者其他逻辑单元的实现。2、声明使得名字为程序所知,一个文件如果想使用别处定义的名字则必须......
  • JavaScript 中的变量声明与赋值
    在计算机编程中,使用名称(或标识符)来表示值是最基本的技术之一。将名称与值绑定为我们提供了一种在程序中引用值并利用它们的方式。当涉及到绑定名称与值时,我们通常称之为将值赋给变量。术语“变量”暗示了新的值可以被赋给它,这意味着与变量关联的值在程序执行过程中可能会改变。如......
  • ref() reactive() 声明响应式状态
    ref函数 使用ref函数将普通数据变成响应式数据reactive函数 把对象和数组这类复合数据类型数据变成响应式数据<template> <span> <spanid="num">{{num}}</span> <inputtype="button"value="+1"@click="f1"> <ul> <liv......
  • flutter使用腾讯IM插件tencent_cloud_chat_sdk打安卓报“从内部类中访问本地变量param
    使用tencent_cloud_chat_sdk5.2.0版本打包安卓flutterbuildapk报以下错误/Users/tanglin/Documents/flutter/.pub-cache/hosted/pub.flutter-io.cn/tencent_cloud_chat_sdk-5.2.0/android/src/main/java/com/qq/qcloud/tencent_im_sdk_plugin/util/CommonUtil.java:401:错误:......
  • 13、声明式事务
    13、声明式事务13.1、回顾事务要么都成功,要么都失败事务在开发种十分的重要,设计到数据一致性的问题,非常的重要确保完整性和一致性事务的ACID原则原子性一致性隔离性:多个业务操作同一个资源,防止数据损坏持久性:事务一旦提交,无论系统出现什么问题,结果都不会......
  • Cognex InSight 电子表格视图功能介绍
    1.界面预览:这里我们将整体界面大致分为7个大的部分,当然布局可以按照自己的习惯自由拖放,这里只展示默认视图。各部分的功能说明:①菜单栏:这里对关键几个功能做介绍,没有提到都不是很重要 查看:当界面上的某一部分没有显示时,可以通过查看菜单重新打开。 传感器: 帮助–InS......
  • sql server创建视图操作
    1、什么是视图视图就是一个虚拟的数据表,该数据表中的数据记录是有一条查询语句的查询结果得到的。2、创建视图准则创建视图需要考虑一下准则:  #视图名称必须遵循标识符的规则,该名称不得与该架构的如何表的名称相同  #你可以对其他......
  • oralce 使用物化视图实例
    --创建物化视图30分钟刷新一次CREATEMATERIALIZEDVIEWtblcheckitemview_mvREFRESHCOMPLETESTARTWITHSYSTIMESTAMPNEXTSYSTIMESTAMP+INTERVAL'30'MINUTEASSELECT*FROMtblcheckitemview;--启用物化视图自动刷新BEGINDBMS_MVIEW.REFRESH('tblcheckitemview_mv'......
  • 找不到模块“../view/Home.vue”或其相应的类型声明。
    环境:vue3+ts解决办法:在src目录里面添加env.d.ts文件,在文件里贴上declaremodule'*.vue'{importtype{DefineComponent}from'vue'constcomponent:ComponentOptions|ComponentOptions['setup']exportdefaultcomponent} ......