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);
}