当前位置: 首页 > 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.lryc.cn/news/602500.html

相关文章:

  • 基于springboot的大创管理系统(源码+论文+开题报告)
  • 【React Context API 优化与性能实践指南】
  • 【前端】React 与 Vue:前端两大框架的全方位对比解析
  • JVM 内存模型深度解析:原子性、可见性与有序性的实现
  • 如何给电脑换个ip地址?电脑换ip几种方法
  • 测试平台开发:自动化测试平台----需求分析
  • fmriprep安装与试用_附ubuntu分区大小调整
  • NAT地址转换,静态NAT,高级NAT,NAPT,easy IP
  • JAVA_EIGHTEEN_特殊文件
  • 使用 nvm (Node Version Manager) 来管理多个 Node.js 版本,并自由切换
  • 从文件到文件描述符:理解程序与文件的交互本质
  • 前端可智能识别的搜索组件 SearchBox 使用详解!
  • DOM编程:table表格开发常用属性和操作汇总
  • it is not annotated with @ClientEndpoint“
  • nginx日志分割
  • Webhook技术深度解析:从原理到实现全指南
  • Cloudflare CDN 中设置地域限制并返回特定界面
  • DNF 与 YUM 的区别详解:从 CentOS 7 到 CentOS 9 的演进
  • nuttx串口驱动框架设计
  • HCIP笔记(第一、二章)
  • 设计模式(十六)行为型:解释器模式详解
  • 自定义View学习记录 plinko游戏View
  • 6、CentOS 9 安装 Docker
  • 状态反馈极点配置
  • 第三阶段—8天Python从入门到精通【itheima】-139节(pysqark实战-前言介绍)
  • mac电脑如何关闭防火墙
  • 本地大语言模型部署指南
  • 分布式渲染效能探析:关键网络性能要素
  • 前端基础之《Vue(25)—Vue3简介》
  • NSGA-II(Non-dominated Sorting Genetic Algorithm II) 算法求解 ZDT1 双目标优化问题