kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-04-23 20:10:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

[fix] low-level performance tuning

Browse Source 
createDOMProps: avoid using default parameters as Babel compiles the
function to calls using 'arguments', which Chrome flags as a deopt.
Replace 'typeof' calls with slightly faster calls to constructor.

onLayout: batch layout measurements in a single requestAnimationFrame.

Close #490
This commit is contained in:
Tasveer Singh
2017-05-25 11:24:41 +01:00
committed by Nicolas Gallagher
parent d57fb6407a
commit a9c7b38df9
3 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/modules/createDOMElement/index.js
View File

@@ -44,14 +44,12 @@ const createDOMElement = (component, props) => {
// normalize DOM events to match React Native events
// TODO: move this out of the render path
for (const prop in domProps) {
if (Object.prototype.hasOwnProperty.call(domProps, prop)) {
const isEventHandler = typeof prop === 'function' && eventHandlerNames[prop];
if (isEventHandler) {
domProps[prop] = wrapEventHandler(prop);
}
Object.keys(domProps).forEach((prop) => {
const isEventHandler = typeof prop === 'function' && eventHandlerNames[prop];
if (isEventHandler) {
domProps[prop] = wrapEventHandler(prop);
}
}
});
return <Component {...domProps} />;
};

20
src/modules/createDOMProps/index.js
View File

@@ -39,7 +39,11 @@ const pointerEventStyles = StyleSheet.create({
const resolver = style => StyleRegistry.resolve(style);
const createDOMProps = (rnProps, resolveStyle = resolver) => {
const createDOMProps = (rnProps, resolveStyle) => {
if (!resolveStyle) {
resolveStyle = resolver;
}
const props = rnProps || emptyObject;
const {
accessibilityLabel,
@@ -72,19 +76,19 @@ const createDOMProps = (rnProps, resolveStyle = resolver) => {
if (accessible === true) {
domProps.tabIndex = AccessibilityUtil.propsToTabIndex(props);
}
if (typeof accessibilityLabel === 'string') {
if (accessibilityLabel && accessibilityLabel.constructor === String) {
domProps['aria-label'] = accessibilityLabel;
}
if (typeof accessibilityLiveRegion === 'string') {
if (accessibilityLiveRegion && accessibilityLiveRegion.constructor === String) {
domProps['aria-live'] = accessibilityLiveRegion === 'none' ? 'off' : accessibilityLiveRegion;
}
if (typeof className === 'string' && className !== '') {
if (className && className.constructor === String) {
domProps.className = domProps.className ? `${domProps.className} ${className}` : className;
}
if (importantForAccessibility === 'no-hide-descendants') {
domProps['aria-hidden'] = true;
}
if (typeof role === 'string') {
if (role && role.constructor === String) {
domProps.role = role;
if (role === 'button') {
domProps.type = 'button';
@@ -92,13 +96,13 @@ const createDOMProps = (rnProps, resolveStyle = resolver) => {
domProps.rel = `${domProps.rel || ''} noopener noreferrer`;
}
}
if (style != null) {
if (style) {
domProps.style = style;
}
if (typeof testID === 'string') {
if (testID && testID.constructor === String) {
domProps['data-testid'] = testID;
}
if (typeof type === 'string') {
if (type && type.constructor === String) {
domProps.type = type;
}