Use class components in benchmarks

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: {

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;

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',

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: {

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: {

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',