Comment puis-je utiliser les hooks React dans un composant classique React `class` ?

Question

Dans cet exemple, j'ai cette classe react :

class MyDiv extends React.component
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return 

La question est de savoir si je peux ajouter des React hooks à cela. Je comprends que React-Hooks est une alternative au style de classe React. Mais si je souhaite migrer progressivement vers React hooks, puis-je ajouter des hooks utiles aux classes ?

Answer 1

Vous pouvez réaliser cela en utilisant des composants d'ordre supérieur génériques

Composants d'Ordre Supérieur (HOC)

import React from 'react';
const withHook = (Component, useHook, hookName = 'hookvalue') => {
  return function WrappedComponent(props) {
    const hookValue = useHook();
    return ;
  };
};

export default withHook;

Utilisation

class MyComponent extends React.Component {
      render(){
        const myUseHookValue = this.props.myUseHookValue;
        return {myUseHookValue};
      }
    }

export default withHook(MyComponent, useHook, 'myUseHookValue');

Answer 2

Vous pouvez utiliser la bibliothèque react-universal-hooks. Il vous permet d'utiliser les fonctions "useXXX" dans la fonction de rendu des composants de classe.

Cela a très bien fonctionné pour moi jusqu'à présent. Le seul problème est que, comme elle n'utilise pas les hooks officiels, les valeurs ne s'affichent pas dans react-devtools.

Pour contourner cela, j'ai créé un équivalent en enveloppant les hooks et en les faisant stocker leurs données (en utilisant la mutation d'objet pour éviter les nouveaux rendus) sur component.state.hookValues. (vous pouvez accéder au composant en auto-enveloppant les fonctions de rendu du composant, pour exécuter currentCompBeingRendered = this)

Pour plus d'informations sur ce problème (et des détails sur la solution de contournement), consultez ici : https://github.com/salvoravida/react-universal-hooks/issues/7

Answer 3

Les composants étatiques ou conteneurs ou les composants basés sur des classes prennent en charge les fonctions de React Hooks, donc nous n'avons pas besoin de React Hooks dans les composants étatiques juste dans les composants dépourvus d'état.

Quelques informations supplémentaires

Qu'est-ce que React Hooks? Alors qu'est-ce que les hooks? Eh bien, les hooks sont une nouvelle manière ou nous offrent une nouvelle manière d'écrire nos composants.

Jusqu'à présent, bien sûr nous avons des composants fonctionnels et basés sur des classes, n'est-ce pas? Les composants fonctionnels reçoivent des props et vous renvoyez du code JSX qui devrait être rendu à l'écran.

Ils sont excellents pour la présentation, donc pour le rendu de la partie UI, pas tant pour la logique métier et ils sont généralement axés sur un ou quelques buts par composant.

Les composants basés sur des classes, d'autre part, reçoivent également des props mais ils ont aussi cet état interne. Par conséquent, les composants basés sur des classes sont les composants qui détiennent en réalité la majorité de notre logique métier, donc avec la logique métier, je veux dire des choses comme nous faisons une requête HTTP et nous devons gérer la réponse et changer l'état interne de l'application ou peut-être même sans HTTP. Un utilisateur remplit le formulaire et nous voulons afficher cela quelque part à l'écran, nous avons besoin d'état pour cela, nous avons besoin de composants basés sur des classes pour cela et donc nous utilisons également généralement des composants basés sur des classes pour orchestrer nos autres composants et transmettre notre état en tant que props à des composants fonctionnels par exemple.

Maintenant, un problème que nous avons avec cette séparation, malgré tous les avantages qu'elle apporte, est que la conversion d'une forme de composant à l'autre est ennuyeuse. Ce n'est pas vraiment difficile mais c'est gênant.

Si vous vous êtes déjà retrouvé dans une situation où vous deviez convertir un composant fonctionnel en un basé sur une classe, c'est beaucoup de saisie et beaucoup de saisie toujours des mêmes choses, donc c'est gênant.

Un problème plus important en guillemets est que les hooks de cycle de vie peuvent être difficiles à utiliser correctement.

De toute évidence, ce n'est pas difficile d'ajouter componentDidMount et d'exécuter du code dans celui-ci mais savoir quel hook de cycle de vie utiliser, quand et comment l'utiliser correctement, peut être un défi surtout dans des applications plus complexes et de toute façon, ne serait-il pas agréable si nous avions une manière de créer des composants et ce super composant pourrait alors gérer à la fois l'état et les effets secondaires comme les requêtes HTTP et également rendre l'interface utilisateur?

Eh bien, c'est exactement de quoi parlent les hooks. Les hooks nous donnent une nouvelle manière de créer des composants fonctionnels et c'est important.

Answer 4

Les Hooks de React vous permettent d'utiliser les fonctionnalités et le cycle de vie de React sans écrire de classe. C'est comme la version équivalente du composant de classe mais avec un format beaucoup plus petit et lisible. Vous devriez migrer vers les Hooks de React car c'est amusant à écrire. Mais vous ne pouvez pas écrire des Hooks de React à l'intérieur d'un composant de classe, car ils ont été introduits pour les composants fonctionnels.

Ceci peut être facilement converti en :

class MyDiv extends React.component
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return

Answer 5

Il ne sera pas possible avec vos composants de classe existants. Vous devrez convertir votre composant de classe en un composant fonctionnel, puis faire quelque chose comme -

function MyDiv() {
const [sampleState, setSampleState] = useState('hello world');
return (
      {sampleState}
    )
}