From 7aef8f04c106e3fe2dcc6a2a956fe2e1cf17e859 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Sat, 6 May 2017 16:01:04 +0100
Subject: [PATCH] Use class components in benchmarks

---
 performance/src/components/View/aphrodite.js        |  7 ++++++-
 performance/src/components/View/css-modules.js      |  7 ++++++-
 performance/src/components/View/glamor.js           |  7 ++++++-
 performance/src/components/View/jss.js              |  9 ++++++---
 .../src/components/View/react-native-stylesheet.js  | 13 +++++++++----
 performance/src/components/View/styletron.js        |  9 ++++++---
 6 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/performance/src/components/View/aphrodite.js b/performance/src/components/View/aphrodite.js
index 020d09bf..e7fc2221 100644
--- a/performance/src/components/View/aphrodite.js
+++ b/performance/src/components/View/aphrodite.js
@@ -2,7 +2,12 @@
 import React from 'react';
 import { css, StyleSheet } from 'aphrodite';
 
-const View = ({ style, ...other }) => <div {...other} className={css(styles.root, style)} />;
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} className={css(styles.root, style)} />;
+  }
+}
 
 const styles = StyleSheet.create({
   root: {
diff --git a/performance/src/components/View/css-modules.js b/performance/src/components/View/css-modules.js
index 0ce4cb7d..6cd767b1 100644
--- a/performance/src/components/View/css-modules.js
+++ b/performance/src/components/View/css-modules.js
@@ -3,6 +3,11 @@ import classnames from 'classnames';
 import React from 'react';
 import styles from './styles.css';
 
-const View = props => <div {...props} className={classnames(styles.initial, props.className)} />;
+class View extends React.Component {
+  render() {
+    const props = this.props;
+    return <div {...props} className={classnames(styles.initial, props.className)} />;
+  }
+}
 
 module.exports = View;
diff --git a/performance/src/components/View/glamor.js b/performance/src/components/View/glamor.js
index 261f29aa..038a58b7 100644
--- a/performance/src/components/View/glamor.js
+++ b/performance/src/components/View/glamor.js
@@ -2,7 +2,12 @@
 import { css } from 'glamor';
 import React from 'react';
 
-const View = ({ style, ...other }) => <div {...other} className={css(viewStyle, ...style)} />;
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} className={css(viewStyle, ...style)} />;
+  }
+}
 
 const viewStyle = {
   alignItems: 'stretch',
diff --git a/performance/src/components/View/jss.js b/performance/src/components/View/jss.js
index 31ce9c64..9ea7ebd0 100644
--- a/performance/src/components/View/jss.js
+++ b/performance/src/components/View/jss.js
@@ -3,9 +3,12 @@ import classnames from 'classnames';
 import injectSheet from 'react-jss';
 import React from 'react';
 
-const View = ({ classes, className, ...other }) => (
-  <div {...other} className={classnames(classes.root, className)} />
-);
+class View extends React.Component {
+  render() {
+    const { classes, className, ...other } = this.props;
+    return <div {...other} className={classnames(classes.root, className)} />;
+  }
+}
 
 const styles = {
   root: {
diff --git a/performance/src/components/View/react-native-stylesheet.js b/performance/src/components/View/react-native-stylesheet.js
index 80302f24..d934ec70 100644
--- a/performance/src/components/View/react-native-stylesheet.js
+++ b/performance/src/components/View/react-native-stylesheet.js
@@ -2,11 +2,16 @@
 import React from 'react';
 import StyleSheet from 'react-native/apis/StyleSheet';
 import registry from 'react-native/apis/StyleSheet/registry';
-import createDOMProps from 'react-native/modules/createDOMProps';
 
-const View = props => (
-  <div {...createDOMProps(props, style => registry.resolve([styles.root, style]))} />
-);
+const emptyObject = {};
+
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    const styleProps = registry.resolve([styles.root, style]) || emptyObject;
+    return <div {...other} {...styleProps} />;
+  }
+}
 
 const styles = StyleSheet.create({
   root: {
diff --git a/performance/src/components/View/styletron.js b/performance/src/components/View/styletron.js
index 2f6f0eb1..acca9176 100644
--- a/performance/src/components/View/styletron.js
+++ b/performance/src/components/View/styletron.js
@@ -6,9 +6,12 @@ import React from 'react';
 
 export const styletron = new Styletron();
 
-const View = ({ style, ...other }) => (
-  <div {...other} className={classnames(viewStyle, ...style)} />
-);
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} className={classnames(viewStyle, ...style)} />;
+  }
+}
 
 const viewStyle = injectStylePrefixed(styletron, {
   alignItems: 'stretch',