网站建设河南,百度站长网站规则改版,html网页设计源代码文件免费,网站 建设 价格表状态更改检测#xff0c;也就是检测应用程序对状态值的改变#xff0c;这样才会相应地更新 UI。 #xff08;#MVC模式中模型Model的改变会更新View界面UI#xff0c;这点类似后端的ORM#xff0c;对象状态更改通过ORM框架自动变更相应数据表值#xff09; 变更检测是前…状态更改检测也就是检测应用程序对状态值的改变这样才会相应地更新 UI。 #MVC模式中模型Model的改变会更新View界面UI这点类似后端的ORM对象状态更改通过ORM框架自动变更相应数据表值 变更检测是前端框架的基本特征 一个框架对这个问题的解决方式还决定了其他一切开发人员体验、用户体验、API 表面积、社区满意度和参与度等。 事实证明从这个角度检查各种框架将为您提供所需的所有信息以便为您和您的用户确定最佳选择。因此让我们深入了解每个框架如何处理变更检测。 主要框架比较 我们将研究每个主要参与者以及他们如何处理变更检测但同样的批判眼光也适用于您可能遇到的任何前端 JavaScript 框架。 ReactJS React 中的更改检测是通过JS 开发人员只需通过 API 直接调用 React 的运行时就可更新状态由于 React 被通知了要进行状态更改因此它也要知道它需要重新渲染组件。 React长时间发展依赖编写组件的默认样式已经发生了各种演变变化但核心原则保持不变。 下面是一个实现按钮计数器的示例组件以 hooks 风格编写 export default function App() {const [count, setCount\] useState(0);return (divbutton onClick{() setCount(count - 1)}decrement/buttonspan{count}/spanbutton onClick{() setCount(count 1)}increment/buttonbutton onClick{() setTimeout(() setCount(count 1), 1000)}increment later/button/div); }这里的关键部分是setCount函数这个函数返回给我们的是React的钩子函数useState。 当调用setCount函数时React 可以使用其内部虚拟 DOM 比较算法来确定要重新渲染页面的哪些部分。 请注意这意味着 React 运行时必须包含在用户下载的应用程序包中。 React 的变更检测范例很简单应用程序状态在框架内维护通过向开发人员公开用于更新它的 API以便 React 知道何时重新渲染。 Angular 当你搭建一个新的 Angular 应用程序时变更检测似乎会自动发生 Component({selector: counter,template: \divbutton (click)count count - 1\decrement/buttonspan{{ count }}/spanbutton (click)count count 1\increment/buttonbutton (click)incrementLater()\increment later/button/div\ }) export **class** Counter {count 0;incrementLater() {setTimeout(() {**this**.count;}, 1000);} } 这里Angular 使用 NgZone 来观察用户操作并在每个事件中检查整个组件树。 对于任何合理大小的应用程序这都会导致性能问题因为快速检查整个树的成本太高。 因此Angular 允许开发人员选择不同的变更检测策略从而为这种行为提供了一个逃生门OnPush OnPush 意味着开发者有责任在状态发生变化时通知 Angular以便 Angular 重新渲染组件。除了默认的天真策略OnPush 是 Angular 提供的唯一一种变化检测策略。启用 OnPush 后如果新状态被异步更新我们必须手动告诉 Angular 的变化检测器检查新状态 Component({selector: counter,template: \divbutton (click)count count - 1\decrement/buttonspan{{ count }}/spanbutton (click)count count 1\increment/buttonbutton (click)incrementLater()\increment later/button/div\,changeDetection: ChangeDetectionStrategy.OnPush }) export **class** Counter {constructor(**private** readonly cdr: ChangeDetectorRef) {}count 0;incrementLater() {setTimeout(() {**this**.count;**this**.cdr.markForCheck();}, 1000);} } 对于任何复杂程度的应用来说这种方法很快就会变得站不住脚。 为了解决这个问题我们引入了其他解决方案。Angular 文档建议的主要解决方案是将 RxJS 观察对象与 AsyncPipe 结合使用 enum Action {INCREMENT,DECREMENT,INCREMENT\_LATER }Component({selector: counter,template: \divbutton (click)update.next(Action.DECREMENT)\decrement/buttonspan{{ count | async }}/spanbutton (click)update.next(Action.INCREMENT)\increment/buttonbutton (click)update.next(Action.INCREMENT\_LATER)\increment later/button/div\,changeDetection: ChangeDetectionStrategy.OnPush }) export **class** Counter {readonly update **new** SubjectAction();readonly count **this**.update.pipe(switchScan((prev, action) {**switch** (action) {**case** Action.INCREMENT:**return** of(prev 1);**case** Action.DECREMENT:**return** of(prev - 1);**case** Action.INCREMENT\_LATER:**return** of(prev 1).pipe(delay(1000));}}, 0),startWith(0));readonly Action Action; } 在其内部AsyncPipe 负责订阅观察对象在观察对象发出新值时通知变化检测器并在组件销毁时取消订阅。 可观察对象是对随时间发生的状态变化进行建模的一种强大方法但也有一些严重的缺点 它们很难调试。学习曲线非常陡峭。它们非常适合对数值流如鼠标移动进行建模但对于更常见的用例简单的状态变化如复选框的开/关状态来说它们就显得多余了。 为了克服默认变更检测模式的缺点Angular 团队正在开发一种名为信号Signals的新方法。 从概念上讲信号类似于 Svelte 存储我们稍后会介绍从根本上讲它们解决变更检测问题的方式与 React 相同框架正在控制应用程序的状态以便轻松监控变更并尽可能高效地重新呈现。 这是一个巨大的范式转变使 Angular 应用程序与其他框架更加相似。 Angular 的变更检测是一场灾难。开发人员有两个次优选择 缓慢而幼稚的默认实现或者手动管理更改检测的复杂性。 信号将使情况变得更好尽管已经晚了近十年。 VueJS Vue 的变更检测方法与 React 和 Angular 略有不同。 您不需要像React那样调用框架函数来更改状态 或像Angular那样更改状态然后通知框架它已更改 而是使用框架专门检测的状态对象来拦截和检测更改。 令人困惑的是Vue 有两种不同的 API它们以不同的方式封装了相同的底层变化检测引擎。 在 Options  API 下你可以定义一个包含状态的对象Vue 会将该对象的代理版本作为this对象的成员分配给组件的函数使用 templatedivbutton clickdecrement\decrement/buttonspan{{ count }}/spanbutton clickincrement\increment/buttonbutton clickincrementLater\increment later/button/div /templatescriptexport **default** {data() {**return** {count: 0};},methods: {decrement() {**this**.count--;},increment() {**this**.count;},incrementLater() {setTimeout(() {**this**.count;}, 1000);}}}; /script 另外Composition API 与 React 的钩子有些类似调用一个框架函数来检索 Vue 可以监控变化的状态对象 script setup**import** { ref } from vue;**const** count ref(0);function increment() {count.value;}function decrement() {count.value--;}function incrementLater() {setTimeout(() {count.value;}, 1000);} /scripttemplatedivbutton clickdecrement\decrement/buttonspan{{ count }}/spanbutton clickincrement\increment/buttonbutton clickincrementLater\increment later/button/div /template 从概念上讲从 ref() 返回的对象有一个 getter 和一个 setter 值这样 Vue 就能跟踪对象的变化。 Vue 利用 JavaScript 语言的特性允许开发人员使用有状态变量而无需考虑变化检测。 Svelte 从表面上看Svelte 版本的计数器组件与其他框架非常相似 scriptlet count 0;function decrement() {count--;}function increment() {count;}function incrementLater() {setTimeout(() {count;}, 1000);} /scriptdivbutton on:click{decrement}\decrement/buttonspan{count}/spanbutton on:click{increment}\increment/buttonbutton on:click{incrementLater}\increment later/button /div 但相比之下Svelte 的变化检测方法就显得非常新颖了。 在编译时Svelte 会分析组件代码的 AST抽象语法树并在编译输出中注入一些代码以便在必要时对 DOM 进行手术式更新。 例如编译后的 decrement() 函数就是这样的 function decrement() {$$invalidate(0, count--, count); }其中 $$invalidate 是对 Svelte 内部的调用用于指示编译后的组件更新 DOM。 这种编译时方法意味着 Svelte 应用程序不需要将大型运行时与应用程序本身捆绑在一起。 Svelte 取得了罕见的双赢平衡开发人员根本不必考虑变更检测并且可以直观地与状态变量交互然而最终用户的体验通过更好的性能得到了改善因为一个最低限度的应用程序内置更改检测被发送到浏览器。 总结 这些只是从开发人员的角度举例说明。每种方法都会对最终用户的应用程序性能产生影响。 React、Vue 和 Angular 都会向用户的浏览器发送运行时需要对运行时进行解析和执行。 Svelte 选择采用编译时框架因此在大多数情况下都不需要运行时这样用户就能获得更快的加载体验。 每种框架都有一些微妙之处使其更容易受到最终用户会遇到的特定错误类别通常与状态管理或变更检测有关的影响。 原文https://www.jdon.com/67402.html