组件高阶ReactJS

El componente de orden superior es una función de JavaScript utilizada para agregar funciones adicionales a componentes existentes. Estas funciones son funciones puras, lo que significa que reciben datos y devuelven valores basados en estos datos. Si los datos cambian, la función de orden superior ejecutará diferentes entradas de datos. Si queremos actualizar el componente devuelto, no necesitamos cambiar el HOC. Todo lo que necesitamos hacer es cambiar los datos que está utilizando nuestra función.

El componente de orden superior (Higher Order Component, HOC) rodea al componente "normal" y proporciona entrada de datos adicional. En realidad, es una función que acepta un componente y devuelve otro componente que envuelve el componente original.

Veamos un ejemplo simple para entender cómo funciona este concepto. MyHOC es una función de alto orden, utilizada solo para pasar datos a MyComponent. La función acepta MyComponent, lo mejora con newData y devuelve el componente mejorado que se presentará en la pantalla.

import React from 'react';
var newData = {
　　　data: 'Data from HOC...'
}
var MyHOC = ComposedComponent => class extends React.Component {
　　　componentDidMount() {
　　　　　　this.setState({
　　　　　　　　　data: newData.data
　　　　　　);
　　　}
　　　render() {
　　　　　　return <ComposedComponent {...this.props} {...this.state}>　/};
　　　}
};
class MyComponent extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.data}<//h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default MyHOC(MyComponent);

Si ejecuta la aplicación, veremos que los datos se han transmitido aMyComponent.

NotaLos componentes de alto orden pueden utilizarse para diferentes funcionalidades. Estas funciones puras son la esencia de la programación funcional. Una vez acostumbrado, notará que su aplicación se vuelve cada vez más fácil de mantener o actualizar.