React hooks之痛:低效的变化传播

最近看到如何去合理使用 React hook? - Parabola的回答 - 知乎 。作者将React hooks的模型类比于rxjs的模型,比如rxjs的merge操作,在React的世界中可以这样实现:
image.png

它们确实可以理解成等价的。它们都是对数据计算关系的定义,输入2个数据流,输出1个数据流。

乍一看很有道理,但是越想越不对劲。真的可以使用hook来模仿rxjs响应式编程吗?

不能。React hooks有一个致命的缺陷:数据变化每传播一步就需要等待1轮渲染。如果通过hook来定义计算关系,那么变化的传播会非常低效。

举个例子,原回答是这样实现distinctUntilChanged的:
image.png

它们也确实可以理解成等价的,让我们用hooks写一个数据关系定义:

function useMyData(a) {  
  return useDistinctUntilChanged(
           useDistinctUntilChanged(
             useDistinctUntilChanged(a)));  
}

我们会发现,a变化以后,它的输出要经历3次重新渲染才能传播到useMyData的调用者(useMyData的调用者这个时候才会感知到数据变化)。这是非常低效的变化传播。

这个例子虽然比较极端,但是如果通过hook来定义计算关系,那么这种情况其实会经常出现。在我看来,目前React hooks并不擅长定义数据计算关系。


csRyan的学习专栏
分享对于计算机科学的学习和思考,只发布有价值的文章: 对于那些网上已经有完整资料,且相关资料已经整...

So you're passionate? How passionate? What actions does your passion lead you to do? If the heart...

1.1k 声望
181 粉丝
0 条评论
推荐阅读
手写一个Parser - 代码简单而功能强大的Pratt Parsing
在编译的流程中,一个很重要的步骤是语法分析(又称解析,Parsing)。解析器(Parser)负责将Token流转化为抽象语法树(AST)。这篇文章介绍一种Parser的实现算法:Pratt Parsing,又称Top Down Operator Precede...

csRyan阅读 2.7k

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.7k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan48阅读 3.4k评论 14

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.6k评论 5

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.8k评论 2

封面图

So you're passionate? How passionate? What actions does your passion lead you to do? If the heart...

1.1k 声望
181 粉丝
宣传栏