ReactJS 组件高阶

Il componente di alto ordine è una funzione JavaScript utilizzata per aggiungere funzionalità aggiuntive a componenti esistenti. Queste funzioni sono funzioni pure, il che significa che ricevono dati e restituiscono valori in base a questi dati. Se i dati cambiano, la funzione di alto ordine eseguirà di nuovo con un input di dati diverso. Se vogliamo aggiornare il componente restituito, non dobbiamo modificare l'HOC. Tutto ciò che dobbiamo fare è cambiare i dati che la nostra funzione sta utilizzando.

Il componente di alto ordine (Higher Order Component, HOC) circonda i componenti "normali" e fornisce ulteriori input di dati. In realtà, è una funzione che accetta un componente e restituisce un altro componente che impacchetta il componente originale.

Ecco un esempio semplice per capire come funziona questo concetto. MyHOC è una funzione alti, utilizzata solo per passare dati a MyComponent. La funzione accetta MyComponent, lo rafforza con newData e restituisce il componente rafforzato che verrà visualizzato sullo schermo.

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

Se eseguiamo l'applicazione, vedremo che i dati sono stati passati aMyComponent.

NotaAlte funzionalità possono essere utilizzate dai componenti alti. Queste funzioni pure sono l'essenza del programmazione funzionale. Una volta abituati, noterete che le vostre applicazioni diventano sempre più facili da mantenere o aggiornare.