子组件在初始化时使用父组件的option时，内存溢出异常

[tencent]

子组件在初始化时使用父组件的option时，内存溢出异常

[dntzhang]

option不要重复使用。要使用pureOption，或者克隆一份出来~~

[louisscrew]

@kmdjs 上述代码用了
this.listTitle = new ListTitle(this.pureOption);
this.itemList = new ItemList(this.pureOption);
还是会报这样的错误
nuclear.js:1453 Uncaught SyntaxError: Invalid regular expression: /\bforEach\b/: Stack overflow(…)

如果要是克隆一份出来，就不会达到我想要的效果了，因为listTilte和itemList的内容是根据App的users变化而变化的，一旦克隆出来，itemList产生变化，listTitle的内容就不会产生变化。

[louisscrew]

@kmdjs 上面的例子我修改了一下。
如果初始化的时候
this.childrenOptions = [
{users:_this.pureOption.users}
,{users:_this.pureOption.users}
];

是正常的，但是没有达到预期的效果，毕竟两个组件的数组不是同一个，所以在点击add或者delete的时候ListTitle没有做出相应的变化。

如果将上述的改成
this.childrenOptions = [
_this.pureOption
,_this.pureOption
];

还是会爆出
nuclear.js:1453 Uncaught SyntaxError: Invalid regular expression: /\bforEach\b/: Stack overflow(…)
这样的异常。

[dntzhang]

    //第三方模板的替换
    Nuclear.render = function (tpl, data) {
        return template.compile(tpl)(data);
    };

    var ListTitle = Nuclear.create({
        render: function () {
            return '<div>List num {{length}}</div>'
        }
    });

    var ItemList = Nuclear.create({
        deleteEvent: function (index) {
            this.option.users.splice(index, 1);
            this.option.updateLen();
        },
        add: function () {
            this.option.users.push({ "name": "333" });
        },
        render: function () {
            return '\
        <ul>\
            {{each users as item index}}\
            <li>{{item.name}} <a onclick="deleteEvent({{index}})" href="javascript:void(0)">delete</a></li>\
            {{/each}}\
        </ul>\
        ';
        }
    });
    var App = Nuclear.create({
        install: function () {
            var _this = this;
            // var listData = _this.pureOption.users;
            // this.childrenOptions = [
            //     _this.pureOption
            //     ,_this.pureOption
            // ];
            console.log(this.pureOption.users)
            this.childrenOptions = [
                { length: _this.pureOption.users.length },
                {
                    users: _this.pureOption.users,
                    updateLen: function () {
                        _this.listTitle.option.length = _this.pureOption.users.length;
                    }
                }
                
            ];
        },
        add: function () {
            this.itemList.option.users.push({ name: 'aaa' });
        },
        clear: function () {
            this.itemList.option.users = [];
        },
        render: function () {
            return '\
            <div nc-id="app">\
                <child nc-constructor="ListTitle" nc-name="listTitle"></child>\
                <child nc-constructor="ItemList" nc-name="itemList"></child>\
                <div><a onclick="add()" href="javascript:void(0)">添加</a></div>\
                <div><a onclick="clear()" href="javascript:void(0)">清空</a></div>\
            </div>\
        ';
        }
    });
    var app = new App({
        users: [{
            name: 'item1'
        }, {
            name: 'item2'
        }, {
            name: 'item3'
        }]
    }, "#demo");

[dntzhang]

前些版本是支持共用option，但是一更改，所有的组件都要重新渲染。牵一发动全身。所以不支持那么搞了

[louisscrew]

那现在就不能有找种想法了呗。就那我现在这个例子来说，当itemlist改变时，需要手动的在add方法或者delete方法中更新ListTitle组件的内容？
如果页面的组件拆分的很细，而且有多个组件需要联动，那么都要手动的去更新？
目前只是app嵌套量两个平级别的组件，手动更新还不算费劲。但是如果组件嵌套到四层或者五层。。手动更新起来就非常累了。

没有什么好的解决办法吗？react似乎支持这种嵌套方式

[dntzhang]

react肯定不支持~ react 不都是 flux、发布订阅或者 props通信~~。况且把不相关的数据传给组件不利于组件复用，也不够简洁，而且会有潜在问题。比如不小心改动了数据~~

[dntzhang]

@louisscrew
想了想，然后支持懒人级联了。
https://github.com/AlloyTeam/Nuclear/blob/master/example/communication.html

[dntzhang]

已经移除了 observejs的集成，需要手动update @louisscrew