es6+react+mobx之Reaction doesn't converge to a stable state after 100 iterations

前端之家收集整理的这篇文章主要介绍了es6+react+mobx之Reaction doesn't converge to a stable state after 100 iterations前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

近期项目开发技术开始转向react。对于react中的state管理,目前主要使用redux或mobx来进行管理。在作出比较后,选择mobx来进行state的管理微笑。

开展

使用es6+react+mobx,实现需求,疯狂的编写代码奋斗。一个巨大的坑悄悄的在等着踩大哭。

高潮

咦,换个浏览器来跑跑,看看效果如何。满心期待中羡慕。一开始就是使用chrome开发调试,chrome就不用管了。next --》firefox。firefox很给力,一切正常,没毛病。那再来下一个Safari。页面打开,what!!!怎么一直在装圈圈惊讶。说是迟那时快,打开浏览器控制台。一把红色的小叉叉提示出问题了难过。仔细一看控制台输出如下error:Reaction doesn’t converge to a stable state after 100 iterations。。。啥,遍历了一百次,这是什么鬼。其他浏览器都是正常的呀。而且es6转es5也考虑了兼容性,使用了es5-shim。

定位过程

既然出现了,那就得消灭它。一步步得开始漫长的定位过程。是不是非法操作state。于是对有操作state的地方进行详细排查,删除复杂逻辑代码删除到最后就剩下一个框框了可怜。但是问题依然存在,啊~~~要疯啦骂人。好吧,这肯定不是我的代码写的有问题,我确定,因为哥的代码都快删除光了可怜。既然业务代码没啥问题,那就对引入的模块源码开始质疑了。是不是源码有问题。开启调试模式,重点盯在抛异常的这段源代码上。附上这段源码:

function runReactionsHelper() {
    globalState.isRunningReactions = true;
    var allReactions = globalState.pendingReactions;
    var iterations = 0;
    while (allReactions.length > 0) {
        if (++iterations === MAX_REACTION_ITERATIONS) {
            resetGlobalState();
            throw new Error(("Reaction doesn't converge to a stable state after " + MAX_REACTION_ITERATIONS + " iterations.")
                + (" Probably there is a cycle in the reactive function: " + allReactions[0]));
        }
        var remainingReactions = allReactions.splice(0);
var remainingReactions = allReactions.splice(0);

for (var i = 0,l = remainingReactions.length; i < l; i++) remainingReactions[i].runReaction(); } globalState.isRunningReactions = false;}

当调试到var remainingReactions = allReactions.splice(0);执行完这行代码后,remainingReactions是空的,length为0再见。不对呀,remainingReactions的值应该是allReactions的所有值。但为什么是空的。那就进入splice方法中看看。这会让人感到奇怪疑问。splice方法是浏览器自带方法,怎么进的去。没错,是进不去,但是浏览器的版本稍微低一点。那就有可能了。我的Safari就是稍微低了那么一点(8.1),才出现此文中提到的问题。版本9以上没这个问题。这就是模块es5-shim干的活了。好那我们进去看看,一探究竟奋斗。进去后发现问题了。附上相应的源码:

splice: function splice(start,deleteCount) {
            var O = ES.ToObject(this);
            var A = [];
            var len = ES.ToUint32(O.length);
            var relativeStart = ES.ToInteger(start);
            var actualStart = relativeStart < 0 ? max((len + relativeStart),0) : min(relativeStart,len);
            var actualDeleteCount = min(max(ES.ToInteger(deleteCount),0),len - actualStart);

            var k = 0;
            var from;
            while (k < actualDeleteCount) {
                from = $String(actualStart + k);
                if (owns(O,from)) {
                    A[k] = O[from];
                }
                k += 1;
            }
...
}

咦,这行代码var actualDeleteCount = min(max(ES.ToInteger(deleteCount),0),len - actualStart);有问题呀,为什么是取最小值min。当deleteCount这个参数不传时,那么actualDeleteCount得到的结果只能是0,也就意味着不会删除。且返回值是空。怎么会这样了???带着这个问题开启谷歌之旅,最终找到了答案。es5和es6这两者对splice方法的定义标准有差异、、、。哦买噶等。es5中第二个参数deleteCount不传的话,默认值是0,而es6中默认值是全部。好吧,我服了再见。

结局

这好像并不是源码的锅,那是谁的锅。只能把锅甩给定标准的人了。锅是甩了。但Safari浏览器问题还没解决呀。其实这问题的根源已经定位出来了,那解决方法自然就能找到了得意。解决办法很简单,那就是修改源码,修改谁的源码?那当然是mobx的源码,因为是它使用了splice方法呀。而且第二个参数没添加,那么我们就给加上去大笑。修改文中引入的第一段mobx源代码修改前:

var remainingReactions = allReactions.splice(0);

修改后:

var remainingReactions = allReactions.splice(0,allReactions.length);

重新编译打包,打开Safari浏览器,圈圈转一下消失了,数据正常加载渲染。大功告成,欧耶。

猜你在找的React相关文章