Giter VIP home page Giter VIP logo

Comments (3)

RubyLouvre avatar RubyLouvre commented on July 2, 2024 
 *   元素： 元素虚拟DOM产生updater, 放入列队
 *         插入其孩子的所有DOM， 收集�孩子中的组件updater， resolve
 *   组件： 元素虚拟DOM产生instance与updater, 执行 willMount,
 *         立即调用render，目的是能让子级组件立即 willMount
 *   <App /> ==> <p ref={refFn}>{this.state.xxx}</p>
 *  container
 * 
 * 
 *  元素的render，用于添加子节点，收集它们的updater
 *  元素的resolve, 用于设置属性与可控属性，执行它们的ref
 * 
 *  组件的render， 用于执行它们的render, diffChildren 
 *  元素的resolve, 执行生命周期钩子与ref与处理异常
 * 
 *  <App><A /><A /><span>xxx</span></App>
 * 
 *   children.forEach(function(){ el.render() })
 *   children.
 * 
 *   VNode.prototype.render = function(p, queue){
 *      var el = this
 *      if(el.vtype < 1){
 *          el.stateNode = toDOM(el, p)
 *       }else if(el.vtype === 1){
 *          el.stateNode = toDOM(el, p)
 *          for(var i in children){
 *            var a = children[i]
 *            a.render(el, queue)
 *          }
 *          queue.push(el)
 *       } else {
 *          var c = el.stateNode = toComponent(el, p, queue)
 *          el.render() //组件
 *          queue.push(el.updater)
 *       }
 *   }
 *   Vnode.prototype.append = function(parentNode){
 *      var p = this.stateNode, children = this.children
 *      if(this.vtype === 1){
 *          for(var i in children){
 *              var el = children[i]
 *              if(el.vtype < 1){
 *                 p.appendChild(el.stateNode)
 *                
 *              }else if(el.vtype === 1){
 * 
 *                  el.append(p)
 *                  el.resolve()
 *              }else if(el.vtype > 1){
 *                 el.append(p)
 *                 el.resolve()
 *              }
 *          }
 *      }
 *    }
 *

from anu.

RubyLouvre avatar RubyLouvre commented on July 2, 2024 
batchUpdate(lastChildren, nextChildren, debug) {//子节点主动让父节点来更新其孩子 Fragment []
          var vnode = this.vnode;
        var parentNode = vnode.stateNode,
            newLength = nextChildren.length,
            oldLength = lastChildren.length,
            unique = createUnique();
        var fullNodes = toArray(parentNode.childNodes);
        var startIndex = fullNodes.indexOf(lastChildren[0]);
        var insertPoint = fullNodes[startIndex] || null;
        for (let i = 0; i < newLength; i++) {//Set
            let child = nextChildren[i];
            let last = lastChildren[i];
            if (last === child) {
                //如果相同
            } else if (last && !unique.has(last)) {
                parentNode.replaceChild(child, last); //如果这个位置有DOM，并且它不在新的nextChildren之中
            } else if (insertPoint) {
                parentNode.insertBefore(child, insertPoint.nextSibling);
            } else {
                parentNode.appendChild(child);
            }
            insertPoint = child;
            unique.add(child);
        }
        if (newLength < oldLength) {
            for (let i = newLength; i < oldLength; i++) {
                if (!unique.has(lastChildren[i])) {
                    removeElement(lastChildren[i]);
                }
            }
        }
    },

from anu.

RubyLouvre avatar RubyLouvre commented on July 2, 2024 
export function collectAndResolve(children, resolve, debug) {
    var ret = [];
    for (var i in children) {
        var child = children[i];
        var inner = child.stateNode;
        if (child._disposed) {
            continue;
        }
        if (child.vtype < 2) {
            //  console.log(inner, debug);
            ret.push(inner);
        } else {
            var updater = inner.updater;
            if (updater.cache) {
                ret.push.apply(ret, updater.cache);
            } else {
                if (child.child) {
                    var args = collectAndResolve(updater.children, resolve, debug);
                    updater.cache = args;
                    ret.push.apply(ret, args);
                }
            }

            if (resolve) {
                updater.addJob("resolve");
                resolve.push(updater); //先执行内围的，再执行外围的
            }
        }
    }
    return ret;
}
export function createUnique() {
    return typeof Set === "function" ? new Set() : new InnerSet();
}
function InnerSet() {
    this.elems = [];
}
InnerSet.prototype = {
    add: function(el) {
        this.elems.push(el);
    },
    has: function(el) {
        return this.elems.indexOf(el) !== -1;
    }
};

from anu.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.