ReactJS - komponenty wyższego rzędu

Komponenty wyższego rzędu to funkcje JavaScript służące do dodawania dodatkowych funkcjonalności do istniejącego komponentu. Te funkcje sąpure, co oznacza, że ​​otrzymują dane i zwracają wartości zgodnie z tymi danymi. Jeśli dane ulegną zmianie, funkcje wyższego rzędu są ponownie uruchamiane z innym wejściem danych. Jeśli chcemy zaktualizować nasz zwracany komponent, nie musimy zmieniać HOC. Wszystko, co musimy zrobić, to zmienić dane, z których korzysta nasza funkcja.

Higher Order Component(HOC) owija się wokół „normalnego” komponentu i zapewnia dodatkowe dane wejściowe. W rzeczywistości jest to funkcja, która przyjmuje jeden komponent i zwraca inny komponent, który opakowuje oryginalny.

Spójrzmy na prosty przykład, aby łatwo zrozumieć, jak działa ta koncepcja. PlikMyHOC jest funkcją wyższego rzędu używaną tylko do przekazywania danych MyComponent. Ta funkcja maMyComponent, wzmacnia go o newData i zwraca ulepszony komponent, który będzie renderowany na ekranie.

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);

Jeśli uruchomimy aplikację, zobaczymy, że dane są przekazywane MyComponent.

Note- Komponenty wyższego rzędu mogą być używane do różnych funkcji. Te czyste funkcje są esencją programowania funkcjonalnego. Kiedy już się do tego przyzwyczaisz, zauważysz, jak łatwiejsza jest konserwacja lub aktualizacja aplikacji.