Match-id-56be813a0002c4888cdae9b82922c3d8342ff287

This commit is contained in:
* 2022-01-27 10:26:27 +08:00 committed by *
commit 8cdc36cfa7
6 changed files with 48 additions and 19 deletions

View File

@ -14,8 +14,11 @@ function updateOneProp(dom, propName, isNativeTag, propVal?, isInit?: boolean) {
} else if (propName === 'dangerouslySetInnerHTML') { } else if (propName === 'dangerouslySetInnerHTML') {
dom.innerHTML = propVal.__html; dom.innerHTML = propVal.__html;
} else if (propName === 'children') { // 只处理纯文本子节点其他children在VNode树中处理 } else if (propName === 'children') { // 只处理纯文本子节点其他children在VNode树中处理
if (typeof propVal === 'string' || typeof propVal === 'number') { const type = typeof propVal;
dom.textContent = String(propVal); if (type === 'string') {
dom.textContent = propVal;
} else if (type === 'number') {
dom.textContent = propVal + ''; // 这种数字转字符串的方式效率最高
} }
} else if (isEventProp(propName)) { } else if (isEventProp(propName)) {
// 事件监听属性处理 // 事件监听属性处理

View File

@ -5,6 +5,13 @@ export const NSS = {
svg: 'http://www.w3.org/2000/svg', svg: 'http://www.w3.org/2000/svg',
}; };
const div = document.createElement('div');
const span = document.createElement('span');
const tr = document.createElement('tr');
const td = document.createElement('td');
const a = document.createElement('a');
const p = document.createElement('p');
// 创建DOM元素 // 创建DOM元素
export function createDom( export function createDom(
tagName: string, tagName: string,
@ -16,6 +23,18 @@ export function createDom(
if (ns !== NSS.html) { if (ns !== NSS.html) {
dom = document.createElementNS(ns, tagName); dom = document.createElementNS(ns, tagName);
} else if (tagName === 'div') {
dom = div.cloneNode(false);
} else if (tagName === 'span') {
dom = span.cloneNode(false);
} else if (tagName === 'tr') {
dom = tr.cloneNode(false);
} else if (tagName === 'td') {
dom = td.cloneNode(false);
} else if (tagName === 'a') {
dom = a.cloneNode(false);
} else if (tagName === 'p') {
dom = p.cloneNode(false);
} else { } else {
dom = document.createElement(tagName); dom = document.createElement(tagName);
} }

View File

@ -34,9 +34,12 @@ function extendAttribute(target, source) {
'deltaX', 'deltaY', 'deltaZ', 'deltaMode', 'deltaX', 'deltaY', 'deltaZ', 'deltaMode',
]; ];
attributes.forEach(attr => { const length = attributes.length;
if (typeof source[attr] !== 'undefined') { for (let i = 0; i < length; i++) {
if (typeof source[attr] === 'function') { const attr = attributes[i];
const type = source[attr];
if (type !== 'undefined') {
if (type === 'function') {
target[attr] = function() { target[attr] = function() {
return source[attr].apply(source, arguments); return source[attr].apply(source, arguments);
}; };
@ -44,7 +47,7 @@ function extendAttribute(target, source) {
target[attr] = source[attr]; target[attr] = source[attr];
} }
} }
}) }
} }
export class CustomBaseEvent { export class CustomBaseEvent {

View File

@ -37,7 +37,7 @@ function mergeDefault(sourceObj, defaultObj) {
}); });
} }
function buildElement(isClone, type, setting, ...children) { function buildElement(isClone, type, setting, children) {
// setting中的值优先级最高clone情况下从 type 中取值,创建情况下直接赋值为 null // setting中的值优先级最高clone情况下从 type 中取值,创建情况下直接赋值为 null
const key = (setting && setting.key !== undefined) ? String(setting.key) : (isClone ? type.key : null); const key = (setting && setting.key !== undefined) ? String(setting.key) : (isClone ? type.key : null);
const ref = (setting && setting.ref !== undefined) ? setting.ref : (isClone ? type.ref : null); const ref = (setting && setting.ref !== undefined) ? setting.ref : (isClone ? type.ref : null);
@ -45,11 +45,14 @@ function buildElement(isClone, type, setting, ...children) {
let vNode = isClone ? type.belongClassVNode : getProcessingClassVNode(); let vNode = isClone ? type.belongClassVNode : getProcessingClassVNode();
if (setting != null) { if (setting != null) {
Object.keys(setting).forEach(k => { const keys = Object.keys(setting);
const keyLength = keys.length;
for(let i = 0; i < keyLength; i++) {
const k = keys[i];
if (isValidKey(k)) { if (isValidKey(k)) {
props[k] = setting[k]; props[k] = setting[k];
} }
}); }
if (setting.ref !== undefined && isClone) { if (setting.ref !== undefined && isClone) {
vNode = getProcessingClassVNode(); vNode = getProcessingClassVNode();
} }
@ -69,11 +72,11 @@ function buildElement(isClone, type, setting, ...children) {
// 创建Element结构体供JSX编译时调用 // 创建Element结构体供JSX编译时调用
export function createElement(type, setting, ...children) { export function createElement(type, setting, ...children) {
return buildElement(false, type, setting, ...children); return buildElement(false, type, setting, children);
} }
export function cloneElement(element, setting, ...children) { export function cloneElement(element, setting, ...children) {
return buildElement(true, element, setting, ...children); return buildElement(true, element, setting, children);
} }
// 检测结构体是否为合法的Element // 检测结构体是否为合法的Element

View File

@ -134,7 +134,7 @@ function triggerUpdate(vNode, state) {
const root = updateShouldUpdateOfTree(vNode); const root = updateShouldUpdateOfTree(vNode);
if (root !== null) { if (root !== null) {
tryRenderRoot(root); tryRenderFromRoot(root);
} }
} }

View File

@ -39,14 +39,15 @@ export class FlagUtils {
}); });
} }
static hasAnyFlag(node: VNode) { // 有标志位 static hasAnyFlag(node: VNode) { // 有标志位
let keyFlag = false; const flags = node.flags;
FlagArr.forEach(key => { const arrLength = FlagArr.length;
if (node.flags[key]) { for(let i = 0; i < arrLength; i++) {
keyFlag = true; const key = FlagArr[i];
return; if (flags[key]) {
return true;
} }
}); }
return keyFlag; return false;
} }
static setNoFlags(node: VNode) { static setNoFlags(node: VNode) {