ReactMount 模块 中的一些函数

306 阅读1分钟

ATTR_NAME

    data-reactid 

internalGetID

返回给定的一个 node 上的属性 data-reactid 的值 没有这个属性 就返回 ''.

    
    function internalGetID(node) {
      return node && node.getAttribute && node.getAttribute(ATTR_NAME) || '';
    }

getID

调用了 internalGetID 将 id 和 node 缓存进 nodeCache 中,最后返回的还是 node 上的 data-reactid 属性的值。

    function getID(node) {
          var id = internalGetID(node);
          if (id) {
            if (nodeCache.hasOwnProperty(id)) {
              var cached = nodeCache[id];
              if (cached !== node) {
                !!isValid(cached, id) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'ReactMount: Two valid but unequal nodes with the same `%s`: %s', ATTR_NAME, id) : invariant(false) : undefined;
        
                nodeCache[id] = node;
              }
            } else {
              nodeCache[id] = node;
            }
          }
        
          return id;
    }

getReactRootElementInContainer

判断container的类型,如果是 类型是Document,就返回整个Document文档。 如果,container类型不是 Document。就返回 container 的第一个子元素。

    function getReactRootElementInContainer(container) {
          if (!container) {
            return null;
          }
          // DOC_NODE_TYPE = 9;
          // Document.nodeType==9
          if (container.nodeType === DOC_NODE_TYPE) {
            // document.documentElement则是整个HTML文件
            return container.documentElement;
          } else {
            return container.firstChild;
          }
    }

getReactRootID

返回 container的第一个子元素的id。

    function getReactRootID(container) {
        var rootElement = getReactRootElementInContainer(container);
        return rootElement && ReactMount.getID(rootElement);
    }

hasNonRootReactChild

如果 node 拥有 data-reactid 属性,就找到 data-reactid的值, 如果 reactRootID是 根组件id 就返回true,否则返回false。

总之一句话: 判断node是不是React根组件。

    function hasNonRootReactChild(node) {
          var reactRootID = getReactRootID(node);
          return reactRootID ? reactRootID !== ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID) : false;
    }

getNode

根据id找到一个node

    function getNode(id) {
        if (!nodeCache.hasOwnProperty(id) || !isValid(nodeCache[id], id)) {
            nodeCache[id] = ReactMount.findReactNodeByID(id);
        }
        return nodeCache[id];
    }

findReactNodeByID

根据id查找React渲染的元素。

    findReactNodeByID: function (id) {
        var reactRoot = ReactMount.findReactContainerForID(id);
        return ReactMount.findComponentRoot(reactRoot, id);
    }