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

Les composants d'ordre supérieur sont comment nous avons fait ce type de chose jusqu'à l'arrivée des hooks. Vous pouvez écrire un simple wrapper de composant d'ordre supérieur pour votre hook.

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return ;
  }
}

Alors que ce n'est pas vraiment l'utilisation directe d'un hook depuis un composant de classe, cela vous permettra au moins d'utiliser la logique de votre hook depuis un composant de classe, sans refacturation.

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

export default withMyHook(MyComponent);

Answer 2

Les composants de classe ne prennent pas en charge les hooks -

selon le Hooks-FAQ:

Vous ne pouvez pas utiliser les hooks à l'intérieur d'un composant de classe, mais vous pouvez certainement mélanger des classes et des composants de fonctions avec des hooks dans un seul arbre. Qu'il s'agisse d'un composant de classe ou d'une fonction qui utilise des hooks est un détail d'implémentation de ce composant. À long terme, nous prévoyons que les hooks seront la principale façon dont les gens écrivent des composants React.

Answer 3

Comme d'autres réponses l'expliquent déjà, l'API des hooks a été conçue pour fournir aux composants de fonction des fonctionnalités actuellement disponibles uniquement dans les composants de classe. Les hooks ne sont pas censés être utilisés dans les composants de classe.

Les composants de classe peuvent être écrits pour faciliter la migration vers des composants de fonction.

Avec un seul état :

class MyDiv extends Component {
   state = {sampleState: 'bonjour le monde'};

   render(){
      const { state } = this;
      const setState = state => this.setState(state);

      return  setState({sampleState: 1})}>{state.sampleState};
   }
}

est converti en

const MyDiv = () => {
   const [state, setState] = useState({sampleState: 'bonjour le monde'});

   return  setState({sampleState: 1})}>{state.sampleState};
}

Remarquez que le setter de l'état useState ne fusionne pas automatiquement les propriétés de l'état, cela devrait être couvert avec setState(prevState => ({ ...prevState, foo: 1 }));

Avec plusieurs états :

class MyDiv extends Component {
   state = {sampleState: 'bonjour le monde'};

   render(){
      const { sampleState } = this.state;
      const setSampleState = sampleState => this.setState({ sampleState });

      return  setSampleState(1)}>{sampleState};
   }
}

est converti en

const MyDiv = () => {
   const [sampleState, setSampleState] = useState('bonjour le monde');

   return  setSampleState(1)}>{sampleState};
}

Answer 4

Complétant bonne réponse de Joel Cox

---

Render Props permet également l'utilisation de Hooks à l'intérieur des composants de classe, si plus de flexibilité est nécessaire :

class MyDiv extends React.Component {
  render() {
    return (
       Bonjour le monde ! {hookValue}} 
      />
    );
  }
}

function HookWrapper({ someProp, render }) {
  const hookValue = useCustomHook(someProp);
  return render(hookValue);
}

Pour les Hooks d'effet secondaire sans valeur de retour :

function HookWrapper({ someProp }) {
  useCustomHook(someProp);
  return null;
}

// ... utilisation

Source : React Training

Answer 5

Les hooks ne sont pas destinés à être utilisés pour les classes mais plutôt pour les fonctions. Si vous souhaitez utiliser des hooks, vous pouvez commencer par écrire un nouveau code en tant que composants fonctionnels avec hooks

selon FAQ React

Vous ne pouvez pas utiliser de Hooks à l'intérieur d'un composant de classe, mais vous pouvez certainement mélanger des classes et des composants fonctionnels avec des Hooks dans un arbre unique. Qu'un composant soit une classe ou une fonction qui utilise des Hooks est un détail d'implémentation de ce composant. À plus long terme, nous nous attendons à ce que les Hooks soient la principale façon dont les gens écrivent des composants React.

const MyDiv = () => {
   const [sampleState, setState] = useState('hello world');
   render(){
      return {sampleState}
   }
}