当前位置: 首页 > news >正文

对于ui=f(state)的理解(react)

一.什么是ui=f(state) (这是一种设计模型)
好处
“UI = f(state)” 是一种强大的设计思想,
它使得用户界面的渲染更加可预测、可维护和响应性。通过将 UI 的渲染逻辑与状态管理分离,
开发者可以更高效地构建复杂的应用程序,并提供更好的用户体验。

1.state
定义:单一数据,驱动ui变换的唯一事实来源

2.f
定义:是一个函数组件
核心职责:接收当前的state以及props,然后返回一个描述用户界面的蓝图

3.ui
来源:函数f计算出的结果
本质:就是一个轻量级的js对象,即虚拟dom,描述了用户界面的样子

总结
我们应用中看到任何的用户界面都仅仅是当前应用状态,通过某个纯函数计算得到的一个结果。
他就类似于一个售货机,投入一个硬币(state),他就一定会吐出特定的饮料(ui);

react采用的是声明式ui,jq采用的是命令式ui,这也是react的优势所在
react的声明式ui,使得我们只需要关注状态的变化,而不用关注状态的更新,react会自动帮我们更新ui

声明式ui和命令式ui的区别
声明式ui我们只需要告诉他我们要达到什么效果,而命令式ui,我们需要告诉他怎么达到这个效果

二.如果组件f只是一个返回ui的描述,那么谁来操作真正的dom?(react的工作机制)
回答:
他是通过state来进行驱动的
当一个state发生变化时,react会重新调用f函数,然后得到一个新的ui描述(新的虚拟dom),
然后通过diff算法,将新的ui和旧的ui进行比较,计算出最小的更新,然后通过react-dom库,将ui渲染到真实的dom中,这个过程就是著名的
reconciliation协调过程

http://www.dtcms.com/a/303100.html

相关文章:

  • Redis四种GetShell方式完整教程
  • 使用Docker在Rocky Linux 9.5上在线部署LangFlow
  • 【STM32编码器接口测速】实现测速功能
  • 删除二维特征图中指定区域的样本
  • linux系统----Ansible中的playbook简单应用
  • 【Java EE】多线程-初阶-线程的状态
  • java里List链式编程
  • 4、如何生成分布式ID?
  • Linux->模拟实现 fopen/fread/fwrite
  • Bruce Momjian 深圳 meetup 回顾
  • 大模型基础设施搭建 - 操作系统centos7
  • SDRAM
  • CTF-Web学习笔记:文件包含篇
  • 阿里给AI To C战略戴上眼镜
  • 4.应用层自定义协议与序列化
  • JUC线程池: ScheduledThreadPoolExecutor详解
  • VMWARE -ESXI-ntp时间同步无法启动异常处理
  • Go-Elasticsearch Typed Client 使用命名、结构与约定
  • Java 大视界 -- Java 大数据在智能安防入侵检测系统中的多源数据融合与误报率降低策略(369)
  • AI原生应用:从人机关系重构到数字空间革命
  • 【分布式版本控制系统】Git的使用
  • 力扣17:电话号码的字母组合
  • 若依【(前后端分离版)SpringBoot+Vue3】
  • Android通知(Notification)全面解析:从基础到高级应用
  • 数据结构:下三角矩阵(Lower Triangular Matrix)
  • Eigen 中矩阵的拼接(Concatenation)与 分块(Block Access)操作使用详解和示例演示
  • 秩为1的矩阵的特征和性质
  • WireShark 抓包
  • Spring Boot项目生产环境部署完整指南
  • 数学建模算法-day[13]