Componentes de orden superior

Un componente de orden superior (HOC por las siglas en inglés de higher-order component) es una técnica avanzada en React para el reuso de la lógica de componentes. Los HOCs no son parte de la API de React. Son un patrón que surge de la naturaleza composicional de React.

En concreto, un componente de orden superior es una función que recibe un componente y devuelve un nuevo componente.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Mientras que un componente transforma props en interfaz de usuario, un componente de orden superior transforma un componente en otro.

Los HOCs son comunes en bibliotecas de terceros usadas en React, tales como connect en Redux y createFragmentContainer en Relay.

En este documento discutiremos por qué los componentes de orden superior son útiles y como escribir tus propios HOCs.

Usa HOCs para preocupaciones transversales

Nota

Anteriormente recomendábamos el uso de mixins para manejar las preocupaciones transversales. Desde entonces, nos hemos dado cuenta que los mixins causan más problemas de los que resuelven. Lee más acerca de por qué hemos decidido alejarnos de los mixins y como puedes migrar tus componentes existentes.

Los componentes son la unidad primaria de reuso de código en React. Sin embargo, encontrarás que algunos patrones no se ajustan directamente a componentes tradicionales.

Por ejemplo, digamos que tienes un componente CommentList que se suscribe a una fuente de datos externa para renderizar una lista de comentarios:

class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      // "DataSource" es alguna fuente de datos global
      comments: DataSource.getComments()
    };
  }

  componentDidMount() {
    // Suscribirse a los cambios
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    // Eliminar el manejador de eventos de cambios
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
    // Actualizar el estado del componente cuando la fuente de datos cambie
    this.setState({
      comments: DataSource.getComments()
    });
  }

  render() {
    return (
      <div>
        {this.state.comments.map((comment) => (
          <Comment comment={comment} key={comment.id} />
        ))}
      </div>
    );
  }
}

Posteriormente escribes un componente para suscribirte a un único post de un blog, el cual sigue un patrón similar:

class BlogPost extends React.Component {
  constructor(props) {
    super(props);