Quels sont les avantages de l'utilisation des hooks en réaction

Avantages de l'utilisation des hooks dans React : 1. Simplifie la réutilisation de la logique, facilitant ainsi la réutilisation du code. Les hooks permettent aux développeurs de réutiliser la logique d'état sans modifier la structure des composants. 2. Les hooks peuvent permettre aux développeurs de cibler la même entreprise. Le code logique est ; regroupés, de sorte que la logique métier soit clairement séparée, ce qui rend le code plus facile à comprendre et à maintenir.

L'environnement d'exploitation de ce tutoriel : système Windows 7, React version 17.0.1, ordinateur Dell G3.

Hook est une nouvelle fonctionnalité de React 16.8. Il est spécialement utilisé dans les composants fonctionnels. Il peut remplacer d'autres fonctionnalités de React dans les composants de classe et est couramment utilisé dans le travail réel.

Que sont les Hooks

Les Hooks sont traduits par des hooks sont des fonctions au sein de composants de fonction qui sont responsables de l'accrochage aux fonctions externes.

React fournit des hooks courants et React prend également en charge les hooks personnalisés. Ces hooks sont utilisés pour introduire des fonctions externes dans les fonctions.

Lorsque nous devons introduire des fonctions externes dans un composant, nous pouvons utiliser les hooks fournis par React ou personnaliser les hooks.

Par exemple, si vous introduisez la fonction de gestion de l'état dans un composant, vous pouvez utiliser la fonction useState. L'utilisation de useState sera présentée en détail ci-dessous.

Pourquoi utiliser les Hooks (Avantages de l'utilisation des hooks)

Il y a 2 raisons principales d'utiliser les Hooks :

• Simplifier la réutilisation logique

• Rendre les composants complexes plus faciles à comprendre ;

1. Simplifiez la réutilisation de la logique et facilitez la réutilisation du code

Avant l'apparition des Hooks, React devait emprunter des modèles de conception complexes tels que des composants d'ordre élevé et des accessoires de rendu pour réaliser la réutilisation logique, mais des composants d'ordre élevé. générera des nœuds de composants redondants, rendant le débogage plus compliqué.

Les hooks nous permettent de réutiliser la logique d'état sans modifier la structure des composants.

Par exemple, la table antd fréquemment utilisée doit souvent maintenir certains états et les modifier au bon moment :

componentDidMount(){
 this.loadData();
}
loadData = ()=>{
   this.setState({
     current: xxx,
     total: xxx,
     pageSize: xxx,
     dataSource: xxx[]
   })
}
onTableChange = ()=>{
   this.setState({
     current: xxx,
     total: xxx,
     pageSize: xxx,
   })
}
render(){
 const {total,pageSize,current,dataSource} = this.state;
 return <Table
  dataSource={dataSource}
  pagination={{total,pageSize,current}
  onChange={this.onTableChange}
 />
}

Chaque table doit écrire une partie de ce genre de logique, alors quelle heure est-il ? Ces logiques très similaires peuvent être abstraites en encapsulant un composant d’ordre supérieur. Ce composant d'ordre supérieur est livré avec ces états et peut appeler automatiquement le serveur pour obtenir des données distantes.

S'il est implémenté avec des composants d'ordre supérieur, cela ressemblera à ceci :

import { Table } from 'antd'
import server from './api'
function useTable(server) {
  return function (WrappedComponent) {
    return class HighComponent extends React.Component {
      state = {
        tableProps: xxx, 
      };
      render() {
        const { tableProps } = this.state;
        return <WrappedComponent tableProps={tableProps} />;
      }
    };
  };
}
@useTable(server)
class App extends Component{
  render(){
    const { tableProps } = this.props;
    return (
      <Table 
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等属性。
        {...tableProps}
      />
    )
  }
}

S'il est implémenté avec des hooks, ce sera :

import { Table } from 'antd'
import server from './api'
function useTable(server) {
  const [tableProps, setTableProps] = useState(xxx);
  return tableProps;
}
function App {
    const { tableProps } = useTable();
    return (
      <Table 
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等属性
        {...tableProps}
      />
    )
}
/*

Comparé aux couches d'imbrication de composants d'ordre élevé "grand-père => parent => child",

les hooks sont comme ceci :

const { brother1 } = usehook1; 
const { brother2} = usehook2;
*/

Vous pouvez voir que la logique des hooks est plus claire et la lisibilité est meilleure.

2. Rendre les composants complexes plus faciles à comprendre

Dans les composants de classe, le code de la même logique métier est dispersé dans différentes fonctions de cycle de vie du composant, et les Hooks peuvent regrouper le code de la même logique métier, ce qui permet La logique métier est clairement séparée, ce qui rend le code plus facile à comprendre et à maintenir.

【Recommandation associée : Tutoriel vidéo Redis】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!