Match-id-876a4a8b542f037d818e2b0d2eeb47f4b51faf1e
This commit is contained in:
*
*
parent
a6a992c192
commit
b84d998fcb
|
|
@ -11,20 +11,18 @@ import { isEventProp, isNativeElement } from '../validators/ValidateProps';
|
|||
function updateOneProp(dom, propName, isNativeTag, propVal?, isInit?: boolean) {
|
||||
if (propName === 'style') {
|
||||
setStyles(dom, propVal);
|
||||
} else if (propName === 'dangerouslySetInnerHTML') {
|
||||
dom.innerHTML = propVal.__html;
|
||||
} else if (propName === 'children') { // 只处理纯文本子节点，其他children在VNode树中处理
|
||||
const type = typeof propVal;
|
||||
if (type === 'string') {
|
||||
dom.textContent = propVal;
|
||||
} else if (type === 'number') {
|
||||
dom.textContent = propVal + ''; // 这种数字转字符串的方式效率最高
|
||||
}
|
||||
} else if (isEventProp(propName)) {
|
||||
// 事件监听属性处理
|
||||
if (!allDelegatedHorizonEvents.has(propName)) {
|
||||
listenNonDelegatedEvent(propName, dom, propVal);
|
||||
}
|
||||
} else if (propName === 'children') { // 只处理纯文本子节点，其他children在VNode树中处理
|
||||
const type = typeof propVal;
|
||||
if (type === 'string' || type === 'number') {
|
||||
dom.textContent = propVal;
|
||||
}
|
||||
} else if (propName === 'dangerouslySetInnerHTML') {
|
||||
dom.innerHTML = propVal.__html;
|
||||
} else {
|
||||
if (!isInit || (isInit && propVal != null)) {
|
||||
updateCommonProp(dom, propName, propVal, isNativeTag);
|
||||
|
|
@ -40,10 +38,12 @@ export function setDomProps(
|
|||
): void {
|
||||
const isNativeTag = isNativeElement(tagName, props);
|
||||
const keysOfProps = Object.keys(props);
|
||||
|
||||
for (let i = 0; i < keysOfProps.length; i++) {
|
||||
const propName = keysOfProps[i];
|
||||
const propVal = props[propName];
|
||||
let propName;
|
||||
let propVal;
|
||||
const keyLength = keysOfProps.length;
|
||||
for (let i = 0; i < keyLength; i++) {
|
||||
propName = keysOfProps[i];
|
||||
propVal = props[propName];
|
||||
|
||||
updateOneProp(dom, propName, isNativeTag, propVal, true);
|
||||
}
|
||||
|
|
@ -55,9 +55,12 @@ export function updateDomProps(
|
|||
changeList: Array<any>,
|
||||
isNativeTag: boolean,
|
||||
): void {
|
||||
for (let i = 0; i < changeList.length; i++) {
|
||||
const { propName, propVal } = changeList[i];
|
||||
|
||||
const listLength = changeList.length;
|
||||
let propName;
|
||||
let propVal;
|
||||
for (let i = 0; i < listLength; i++) {
|
||||
propName = changeList[i].propName;
|
||||
propVal = changeList[i].propVal;
|
||||
updateOneProp(dom, propName, isNativeTag, propVal);
|
||||
}
|
||||
}
|
||||
|
|
@ -73,19 +76,24 @@ export function compareProps(
|
|||
const keysOfOldProps = Object.keys(oldProps);
|
||||
const keysOfNewProps = Object.keys(newProps);
|
||||
|
||||
const oldPropsLength = keysOfOldProps.length;
|
||||
let propName;
|
||||
let oldStyle;
|
||||
let styleProps;
|
||||
let styleProp;
|
||||
// 找到旧属性中需要删除的属性
|
||||
for (let i = 0; i < keysOfOldProps.length; i++) {
|
||||
const propName = keysOfOldProps[i];
|
||||
for (let i = 0; i < oldPropsLength; i++) {
|
||||
propName = keysOfOldProps[i];
|
||||
// 新属性中包含该属性或者该属性为空值的属性不需要处理
|
||||
if (keysOfNewProps.includes(propName) || oldProps[propName] == null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (propName === 'style') {
|
||||
const oldStyle = oldProps[propName];
|
||||
const styleProps = Object.keys(oldStyle);
|
||||
oldStyle = oldProps[propName];
|
||||
styleProps = Object.keys(oldStyle);
|
||||
for (let j = 0; j < styleProps.length; j++) {
|
||||
const styleProp = styleProps[j];
|
||||
styleProp = styleProps[j];
|
||||
updatesForStyle[styleProp] = '';
|
||||
}
|
||||
} else if (
|
||||
|
|
@ -110,11 +118,17 @@ export function compareProps(
|
|||
}
|
||||
}
|
||||
|
||||
let newPropValue;
|
||||
let oldPropValue;
|
||||
let oldStyleProps;
|
||||
let newStyleProps;
|
||||
let newHTML;
|
||||
let oldHTML;
|
||||
// 遍历新属性，获取新增和变更属性
|
||||
for (let i = 0; i < keysOfNewProps.length; i++) {
|
||||
const propName = keysOfNewProps[i];
|
||||
const newPropValue = newProps[propName];
|
||||
const oldPropValue = oldProps != null ? oldProps[propName] : null;
|
||||
propName = keysOfNewProps[i];
|
||||
newPropValue = newProps[propName];
|
||||
oldPropValue = oldProps != null ? oldProps[propName] : null;
|
||||
|
||||
if (newPropValue === oldPropValue || (newPropValue == null && oldPropValue == null)) {
|
||||
// 新旧属性值未发生变化，或者新旧属性皆为空值，不需要进行处理
|
||||
|
|
@ -124,18 +138,18 @@ export function compareProps(
|
|||
if (propName === 'style') {
|
||||
if (oldPropValue) { // 之前 style 属性有设置非空值
|
||||
// 原来有这个 style，但现在没这个 style 了
|
||||
const oldStyleProps = Object.keys(oldPropValue);
|
||||
oldStyleProps = Object.keys(oldPropValue);
|
||||
for (let j = 0; j < oldStyleProps.length; j++) {
|
||||
const styleProp = oldStyleProps[j];
|
||||
styleProp = oldStyleProps[j];
|
||||
if (!newPropValue || !Object.prototype.hasOwnProperty.call(newPropValue, styleProp)) {
|
||||
updatesForStyle[styleProp] = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 现在有这个 style，但是和原来不相等
|
||||
const newStyleProps = newPropValue ? Object.keys(newPropValue) : [];
|
||||
newStyleProps = newPropValue ? Object.keys(newPropValue) : [];
|
||||
for (let j = 0; j < newStyleProps.length; j++) {
|
||||
const styleProp = newStyleProps[j];
|
||||
styleProp = newStyleProps[j];
|
||||
if (oldPropValue[styleProp] !== newPropValue[styleProp]) {
|
||||
updatesForStyle[styleProp] = newPropValue[styleProp];
|
||||
}
|
||||
|
|
@ -150,8 +164,8 @@ export function compareProps(
|
|||
updatesForStyle = newPropValue;
|
||||
}
|
||||
} else if (propName === 'dangerouslySetInnerHTML') {
|
||||
const newHTML = newPropValue ? newPropValue.__html : undefined;
|
||||
const oldHTML = oldPropValue ? oldPropValue.__html : undefined;
|
||||
newHTML = newPropValue ? newPropValue.__html : undefined;
|
||||
oldHTML = oldPropValue ? oldPropValue.__html : undefined;
|
||||
if (newHTML != null) {
|
||||
if (oldHTML !== newHTML) {
|
||||
toBeUpdatedProps.push({
|
||||
|
|
|
|||
Loading…
Reference in New Issue