RN: Optimize View Attribute Initialization

Reviewed By: sahrens

Differential Revision: D7893593

fbshipit-source-id: a425e841c9c86b063803878c7b07704c8a90a83a
This commit is contained in:
Tim Yung 2018-05-07 16:45:14 -07:00 committed by Facebook Github Bot
parent 1c90a2b47b
commit 28d37781c6

View File

@ -141,22 +141,12 @@ function requireNativeComponent(
viewConfig.directEventTypes = directEventTypes; viewConfig.directEventTypes = directEventTypes;
for (const key in nativeProps) { for (const key in nativeProps) {
let useAttribute = false; const typeName = nativeProps[key];
const attribute = {}; const diff = getDifferForType(typeName);
const process = getProcessorForType(typeName);
const differ = TypeToDifferMap[nativeProps[key]]; viewConfig.validAttributes[key] =
if (differ) { diff == null && process == null ? true : {diff, process};
attribute.diff = differ;
useAttribute = true;
}
const processor = TypeToProcessorMap[nativeProps[key]];
if (processor) {
attribute.process = processor;
useAttribute = true;
}
viewConfig.validAttributes[key] = useAttribute ? attribute : true;
} }
// Unfortunately, the current set up puts the style properties on the top // Unfortunately, the current set up puts the style properties on the top
@ -186,32 +176,49 @@ function requireNativeComponent(
return createReactNativeComponentClass(viewName, getViewConfig); return createReactNativeComponentClass(viewName, getViewConfig);
} }
const TypeToDifferMap = { function getDifferForType(
// iOS Types typeName: string,
CATransform3D: matricesDiffer, ): ?(prevProp: any, nextProp: any) => boolean {
CGPoint: pointsDiffer, switch (typeName) {
CGSize: sizesDiffer, // iOS Types
UIEdgeInsets: insetsDiffer, case 'CATransform3D':
// Android Types return matricesDiffer;
// (not yet implemented) case 'CGPoint':
}; return pointsDiffer;
case 'CGSize':
function processColorArray(colors: ?Array<any>): ?Array<?number> { return sizesDiffer;
return colors && colors.map(processColor); case 'UIEdgeInsets':
return insetsDiffer;
// Android Types
// (not yet implemented)
}
return null;
} }
const TypeToProcessorMap = { function getProcessorForType(typeName: string): ?(nextProp: any) => any {
// iOS Types switch (typeName) {
CGColor: processColor, // iOS Types
CGColorArray: processColorArray, case 'CGColor':
UIColor: processColor, case 'UIColor':
UIColorArray: processColorArray, return processColor;
CGImage: resolveAssetSource, case 'CGColorArray':
UIImage: resolveAssetSource, case 'UIColorArray':
RCTImageSource: resolveAssetSource, return processColorArray;
// Android Types case 'CGImage':
Color: processColor, case 'UIImage':
ColorArray: processColorArray, case 'RCTImageSource':
}; return resolveAssetSource;
// Android Types
case 'Color':
return processColor;
case 'ColorArray':
return processColorArray;
}
return null;
}
function processColorArray(colors: ?Array<any>): ?Array<?number> {
return colors == null ? null : colors.map(processColor);
}
module.exports = requireNativeComponent; module.exports = requireNativeComponent;