javascript – Aurelia Redux表现

前端之家收集整理的这篇文章主要介绍了javascript – Aurelia Redux表现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我每天都会使用Aurelia.最近,我一直在研究使用Redux(即我使用Aurelia Redux构建了几个小型试用应用程序)并且给我留下了非常深刻的印象(我的开发工作流程和关于我的应用程序的推理清晰度得到了极大的改进).我已经决定开始将它用于实际应用程序.

话虽如此,我对性能表示担忧(我已经查看了有关性能的帖子,但没有直接看到我的问题地址).我认为这个问题并不是针对Aurelia的,而是一个关于Redux的问题,并将其与非反应库一起使用.

让我先解释一下我对Redux的理解(或许我的问题真的来自一个有缺陷的理解?).从本质上讲,我理解Redux的方式是存在一个商店(一个javascript对象)和一个reduce函数.现在,reduce函数可以定义为函数树(每个函数负责修改整个商店的特定分支),但是,实际上,Redux接收单个简化函数(它无法知道组成了多少函数)创建这个单一的功能).

我使用Redux的方式是这样的(仅举例):

@inject(Store)
export class TodosListCustomElement {
    constructor(store) {
        this.store = store;
    }

    activate() {
        this.update();
        this.unsubcribe = this.store.subscribe(this.update.bind(this));
    }

    deactivate() {
        this.unsubcribe();
    }

    update() {
        const newState = this.store.getState();

        this.todos = newState.todos;
    }

    toggleCompleted(index) {
        this.store.dispatch({
            type: UPDATE_TODO,payload: {
                index,values: {
                    isCompleted: !this.todos[index].isCompleted
                }
            }
        });
    }
}

实质上,组件树下的每个组件都会订阅自己来存储更改并刷新它从商店中获取所需的数据.

我担心的是,每个已发布的行动似乎都发生了很多事情.例如,假设我有一个大型应用程序,具有类似的大型存储和reducer树.假设有一些限制文本框,每隔250毫秒将更改分派给商店中的单个文本字段(在列表的一个项目中).这意味着当用户输入时,整个reducer函数每250ms执行一次(这可能意味着执行相当多的后代reducers)以及所有订阅函数也被执行.基本上,即使是商店的最小部分也似乎有很多开销.

将此与标准绑定(在Aurelia中)进行对比,其中只有一个绑定函数(变异观察者)需要每250ms执行一次以更新模型…

由于我是Redux的新手,我想我很有可能会天真地误解某些东西等.我提前道歉并希望得到纠正/放在正确的轨道上(因为我使用Redux的经验非常愉快).

提前致谢

最佳答案
你实际上在多个层面上很好地描述了这种情况.

首先,React-Redux绑定做了大量工作,以确保当与给定组件相关的某些数据发生更改时,连接组件仅实际重新呈现.这是通过让连接组件提供名为mapStateToProps的函数来完成的,该函数从存储状态中提取组件想要的数据. connect生成的包装器组件将在每次调度后重新运行其mapState函数,并在最新返回值和先前返回值之间进行浅层比较,以查看数据是否已更改.这减少了需要完成的实际UI更新量.

您如何处理连接表单也存在权衡.是的,为每次击键调度一个动作可能总体上效率低下.我个人使用React表单包装器组件在本地缓冲那些文本输入更改,并且仅在用户完成键入后调度去抖动的Redux操作.

React-Redux绑定最近被重写,现在主要基于memoized选择器函数,而不是React组件内部的大部分逻辑.我不知道Aurelia绑定是如何组合在一起的,但我怀疑他们可能会利用已经完成的大量工作来优化React绑定.

您可能对我在Redux相关性能方面的一些文章感兴趣.请参阅http://redux.js.org/docs/faq/Performance.html#performance-scaling中的Redux FAQ问题,以及https://github.com/markerikson/react-redux-links/blob/master/react-performance.md#redux-performance中React / Redux链接列表中的文章.

原文链接:https://www.f2er.com/js/429120.html

猜你在找的JavaScript相关文章