我解决了我的问题,但我猜没有正确的答案,因为它真的取决于具体的情况.就我而言,我决定采用这种方法:

原始选择器处理得很好的挑战之一是最终信息是从以任意顺序传递的许多部分编译而来的.如果我决定逐步在Reducer中构建最终信息,我必须确保计算所有可能的场景(信息块可能到达的所有可能的顺序)并定义所有可能状态之间的转换.然而,通过重新选择,我可以简单地拿走我现在拥有的东西并从中取出一些东西.

为了保持这个功能,我决定将选择器逻辑移动到包装父减速器中.

好吧,让我们说我有三个减速器,A,B和C,以及相应的选择器.每个处理一条信息.该部分可以从服务器加载,也可以来自客户端的用户.这将是我原来的选择器:

const makeFinalState(a,b,c) => (new List(a)).map(item =>

new MyRecord({ ...item,...(b[item.id] || {}),...(c[item.id] || {}) });

export const finalSelector = createSelector(

[selectorA,selectorB,selectorC],(a,c) => makeFinalState(a,c,));

(这不是实际的代码,但我希望它有意义.请注意,无论各个reducer的内容可用的顺序如何,选择器最终都会生成正确的输出.)

我希望我的问题现在很明确.如果任何这些reducer的内容发生变化,则从头开始重新计算选择器,生成所有记录的全新实例,最终导致React组件的完全重新呈现.

我目前的解决方案看起来很简单

export default function finalReducer(state = new Map(),action) {

state = state

.update('a',a => aReducer(a,action))

.update('b',b => bReducer(b,action))

.update('c',c => cReducer(c,action));

switch (action.type) {

case HEAVY_ACTION_AFFECTING_A:

case HEAVY_ACTION_AFFECTING_B:

case HEAVY_ACTION_AFFECTING_C:

return state.update('final',final => (final || new List()).mergeDeep(

makeFinalState(state.get('a'),state.get('b'),state.get('c')));

case LIGHT_ACTION_AFFECTING_C:

const update = makeSmallIncrementalUpdate(state,action.payload);

return state.update('final',final => (final || new List()).mergeDeep(update))

}

}

export const finalSelector = state => state.final;

核心思想是:

>如果发生了重大事件(即我从服务器获得了大量数据),我将重建整个派生状态.

>如果发生了一些小的事情(即用户选择了一个项目),我只是在原始的reducer和包装父减速器中进行快速增量更改(存在一定的重复性,但是必须实现一致性和良好的性能) .

与选择器版本的主要区别在于我总是将新状态与旧状态合并. Immutable.js库非常智能,如果它们的内容完全相同,则不会用新的Record实例替换旧的Record实例.因此保留了原始实例,因此不会重新呈现相应的纯组件.

显然,深度合并是一项代价高昂的操作,因此这对于非常大的数据集不起作用.但事实是,与React重新渲染和DOM操作相比,这种操作仍然很快.因此,这种方法可以在性能和代码可读性/简洁性之间做出很好的折衷.

最后的注意事项:如果不是单独处理那些轻量级动作,那么这种方法基本上等同于用纯组件的shouldComponentUpdate方法中的deepEqual替换shallowEqual.

react动态改变选中不选中_reactjs – 如何避免使用重新选择来计算派生状态时React重新渲染...相关推荐

  1. [react] 写出React动态改变class切换组件样式

    [react] 写出React动态改变class切换组件样式 export default memo(function Demo(){const [clsName,setClsName] = useS ...

  2. react动态改变选中不选中_当使用react hooks选中任何复选框时,如何使启用按钮起作用?...

    当选中任何复选框时,我在启用按钮时有一个错误.目前它在第一次点击时不起作用,而只在第二次点击时起作用.取消选中复选框也适用于第一次单击.我认为这与各州有关,但我不太明白是什么导致了这个问题. chec ...

  3. vue实现动态改变title

    vue实现动态改变title 想要实现vue动态改变页面title,需要给每个页面设置标题.并且在路由发生变化时修改页面title router - index.js const router = n ...

  4. canvas绘制坐标点连线/动态改变宽度导致canvas渲染失败

    文章目录 一.有关canvas 二.绘制图案 三.放大缩小功能 四.canvas清空画布的三种方式 五.动态改变宽度导致canvas渲染失败 现在需要根据坐标点绘制对应的连线,于是考虑采用canvas ...

  5. 实现div的大小随着内容进行动态改变

    div的动态改变有两种方式: 1.使用百分比的形式来实现div的动态改变的实现代码: #id{width: 30%;height: 40%; } /* 这样一来,该div的宽度和高度将始终分别对应于浏 ...

  6. 如何改变UITableViewCell的选中样式(颜色)?storyboard上cell的selection不可用?

    想要改变cell被选中后的颜色,看到storyboard上有个selection,很兴奋,改一下蓝色试试,结果不管用.. 原因: developer.apple.com/documentati- 官方 ...

  7. php 单选按钮选中的值,在javascript中根据单选按钮选择更改变量值

    我想根据单选按钮选择来计算最终价格,但在我的例子中,它只显示页面中的第一个单选按钮值.当检查另一个时,它不会改变. 这是我的密码 Normal - Processing within 3 days U ...

  8. xcode动态改变窗口大小_详细的理论要点+3个经典案例,帮助你深入理解动态面板...

    什么是动态面板 动态面板是Axure的高级交互元件,由不同的状态面板组成,是我们制作交互过程中运用频率最高的元件,很多交互效果需要依赖动态面板实现.动态面板的状态面板就像是一个容器,我们可以在里面放置 ...

  9. 点击echarts柱状图动态改变数据项颜色样式

    首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述 今天来实现点击echarts柱状图,动 ...

最新文章

  1. 读文件夹下所有文件,并提取中文字符
  2. 2018 年 ACM-ICPC 焦作站现场赛感受
  3. 首届中国服务创新大会在深举办 助力产业智慧升级
  4. SpringMVC常用配置-添加静态资源处理器-针对SpringMVC中静态资源无法访问的问题...
  5. 如何查看类型为LRAW的SAP ABAP数据库表字段的内容
  6. Eclipse 导入项目乱码问题
  7. 系统间数据传输,产品经理视角的9千字总结:接口、otter、log4j、SFTP、MQ……...
  8. java云题库测试使用说明 0917
  9. Redis系列 --第一篇
  10. 20145234黄斐《java程序设计》第十三周代码检查
  11. 打印异常堆栈_通过异常堆栈丢失谈即时编译优化
  12. React中使用Vditor详解(自定义图片)
  13. qtreewidget点击空白处时取消以选项_手机APP自动续费,我们要如何取消?
  14. Python中函数的形参与按值传递之间的关系
  15. Vue - 图片放大镜(vue-piczoom)
  16. 1.1各种编程语言的介绍
  17. Java网络编程(BIO和NIO)
  18. 数据科学的原理与技巧 四、数据清理
  19. 怎样用N多小图片拼成一张大图?(数字图像处理)
  20. 9位院士!10所一流大学,迎“新帅”

热门文章

  1. ssis包部署到数据库_使用SSIS包将行标题和数据添加到平面文件中
  2. export和export default的区别 1
  3. Chemical table CFR500 div2D(并查集)
  4. Linux 期中架构 inotify
  5. 18.mysql优化(三)–explain分析sql语句执行效率
  6. mysql数据库补充知识3 查询数据库记录信息之多表查询
  7. 五、概念数据模型(CDM生成LDM,PDM和OOM)
  8. 关于C# DataGridView 全选与取消的小问题
  9. php的计划任务定时执行
  10. FCKEditor 打开页面总是得到焦点问题处理 FCKConfig.StartupFocus=false;