反应多个高阶组件

Question

I'm just discovering the amazing benefits of using HOC in my react projects.

My question is there any performance hit for calling multiple HOC functions on a component?

Example

export default withState(withLabel(withTheme(MyComponent)))

This will of course only render one component, however looking at my react dev tools i can see the outputted HOC components three levels deep. Is this something to be wary of or is there a better approach to calling multiple HOC on a component?

Answer 1

Your syntax is equivalent to doing:

<StateProvider>
  <LabelProvider>
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  </LabelProvider>
</StateProvider>

The performance hit will come from how these HOC are implemented. You would probably have to look at each of them.

Example:

• Theme Provider HOCs usually store a bunch of colors and variables in the React context. So using only one at the very root of your App is enough.
• One could imagine that your LabelProvider simply adds an extra span before your component, in which case there is little to worry about
• StateProviders like redux usually inject props in the component just below them so you don't really have a choice but to use them whenever you need state objects.

In conclusion, there are no hard rules. Your main focus should be on understanding what these HOC do and to try to limit unnecessary re-renders of your app.

Answer 2

This answer is not exactly about performance , but one thing I do when I have to use a few higher order components at once to wrap the same component is to create one main higher order component that will call all the higher order components that I need so I can just wrap in this one instead.

Creating one main higher order component makes them easier to reuse and the wrapped components more neat and easy to read.

Look at this example:

"Main" higher order component calling all the common ones:

import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { withStyles, createStyles, Theme, WithStyles } from '@material-ui/core/styles';
import withSnack, { Snack } from '../CommonComponents/SnackBar/WithSnack';
import withCancelable, { Cancelable } from '../CommonComponents/WithCancelable';

interface Props {
  snack: Snack;
  cancelable: Cancelable;
  history: any;
};

type WithCommon =
  (TargetComponent: React.ComponentClass, componentsToInclude?: string[], styles?: any, mapStateToProps?: any, mapDispatchToProps?: any) => React.ComponentClass<Props, any>;

const withCommon = (
  TargetComponent: any,
  componentsToInclude: string[] | undefined = undefined,
  styles: any | undefined = undefined,
  mapStateToProps: any | undefined = undefined,
  mapDispatchToProps: any | undefined = undefined
): WithCommon => {

  const withCommonComponent = (props: Props) => (<TargetComponent {...props} />)
    let resultComponent: any = withCommonComponent;

    if (mapStateToProps || mapDispatchToProps) {
      resultComponent = connect(
        mapStateToProps,
        mapDispatchToProps
      )(withCommonComponent);
    }

    if (styles) {
      resultComponent = withStyles(styles)(resultComponent);
    }

    if (componentsToInclude) { // "extra" components to wrap the target
      if (componentsToInclude.length) {
        if (componentsToInclude.some(c => c === 'router')) {
          resultComponent = withRouter(resultComponent);
        }
        if (componentsToInclude.some(c => c === 'snack')) {
          resultComponent = withSnack(resultComponent);
        }
        if (componentsToInclude.some(c => c === 'cancelable')) {
          resultComponent = withCancelable(resultComponent);
        }
      } else { // if array is empty then include them all (avoids typing the same ones every time you need to have them all)
        resultComponent = withCancelable(withSnack(withRouter(resultComponent)));
      }
    }

    return resultComponent;
};

export interface Common extends WithStyles {
  snack: Snack,
  cancelable: Cancelable,
  history: any,
};

export default withCommon;

And then the component that is wrapped by the main one above:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Avatar from '@material-ui/core/Avatar';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Dialog from '@material-ui/core/Dialog';
import { createStyles, Theme } from '@material-ui/core/styles';
import TextFieldOutlined from '../CommonComponents/Form/TextFieldOutlined';
import { hideSignin } from '../Redux/ActionCreators'
import Auth from '../Auth/Auth';
import Form from '../CommonComponents/Form/Form';
import Loading from '../CommonComponents/Loading';
import withCommon, { Common } from '../CommonComponents/WithCommon';

const styles = (theme: Theme) =>
  createStyles({...});

interface Props extends Common {
  show: boolean;
  hideSignin(): void;
};

interface State {...}

class SignIn extends Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.handleEmailchange = this.handleEmailchange.bind(this);
    this.handlePasswordchange = this.handlePasswordchange.bind(this);
    this.signin = this.signin.bind(this);
  }

  signin(e: any): void {
    if (!e.currentTarget.form.reportValidity()) {
      return;
    }

    e.preventDefault();

    this.setState({ loading: true });

    Auth.signin(
      this.state.email,
      this.state.password,
      (promise: Promise<any>) => this.props.cancelable.setCancelable('signin', promise),
    )
    .then(() => {
      this.props.history.push('/');
    })
    .catch((err: any) => {
      this.props.snack.error(err.message);
    })
    .finally(() => {
      this.setState({ loading: false });
    });
  }

  render() {
    const { classes } = this.props;

    return (
      <Dialog
        open={this.props.show}
        onClose={() => this.props.hideSignin()}
      >
        <Paper className={classes.paper}>
          <Loading loading={this.state.loading} />
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5" className={classes.label}>
            Sign in
          </Typography>
          <Form submitButtonText="Sign in" onSubmit={this.signin}>
            <TextFieldOutlined required label="Email Address" type="email" onChange={this.handleEmailchange} focused />
            <TextFieldOutlined required label="Password" type="password" onChange={this.handlePasswordchange} />
          </Form>
        </Paper>
      </Dialog>
    );
  }
}

(SignIn as React.ComponentClass<Props, State>).propTypes = {
  classes: PropTypes.object.isRequired,
} as any;

const mapStateToProps = (state: any) => {
  return {
    show: state.signin.show,
  };
}

const mapDispatchToProps = (dispatch: any) => {
  return {
    hideSignin: () => dispatch(hideSignin()),
  }
}

// Empty array will make it include all the "extra" higher order components
export default withCommon(SignIn, [], styles, mapStateToProps, mapDispatchToProps) as any;

// Or you could specify which extra components you want to use:
// export default withCommon(SignIn, ['router', 'cancelable'], styles, mapStateToProps, mapDispatchToProps) as any;

// Or some nulls if you just want to connect the store:
// export default withCommon(SignIn, null, null, mapStateToProps, mapDispatchToProps) as any;

Answer 3

I wouldn't use that. It's complicated to understand where the props come from, when you are looking at your MyComponent component. There are much more downsides using this pattern. Anyway if you decided to use HOC s use it in a right way eg

const withDetails = Component => {
  const C = props => {
    // do something
  }

  // assign display & wrapped names - easier to debug
  C.displayName = `withRouter(${Component.displayName))`
  C.WrappedComponent = Component;

  return C;
}

Instead of using HOC si suggest looking at render props react pattern. It's well explained in a Use a Render Prop! article by Michael Jackson (react-router creator).

Hope it makes sense.