Que sont les crochets de réaction ?

Les hooks React sont une nouvelle fonctionnalité de React16.8, qui permettent aux composants de fonction React d'avoir un état et de fournir des méthodes de cycle de vie telles que composantDidMount et composantDidUpdate.

La plupart de nos composants de classe React peuvent enregistrer l'état, mais les composants de fonction ne le peuvent pas ? Et les composants de classe ont un cycle de vie, mais pas les composants de fonction ?

Dans les premières versions de React, les composants de classe peuvent optimiser certains rendus inutiles en héritant de PureComponent. Par rapport aux composants de fonction, le site officiel de React ne fournit pas de méthode correspondante pour mettre en cache les composants de fonction afin de réduire certains rendus inutiles. La fonction React.memo sort.

Les nouveaux Hooks de React 16.8 peuvent donner aux composants de fonction React un état et fournir des méthodes de cycle de vie telles que composantDidMount et composantDidUpdate.

Le mot Hook signifie « crochet ».

React Hooks signifie que les composants doivent être écrits autant que possible sous forme de fonctions pures. Si des fonctions externes et des effets secondaires sont nécessaires, des hooks doivent être utilisés pour « accrocher » le code externe. Les React Hooks sont ces hooks.

Utilisez le crochet dont vous avez besoin. React fournit par défaut des hooks courants et vous pouvez également encapsuler vos propres hooks.

Tous les hooks introduisent des fonctions externes aux fonctions, donc React accepte que les hooks soient nommés avec le préfixe use pour une identification facile. Si vous souhaitez utiliser la fonction xxx, le hook s'appelle usexxx.

Ce qui suit présente les quatre hooks les plus couramment utilisés fournis par React par défaut.

• useState()

• useContext()

• useReducer()

• useEffect()

useState() : hook d'état

useState() Présentation état pour les composants de fonction. Les fonctions pures ne peuvent pas avoir d'état, alors mettez l'état dans le hook.

Dans la classe de composant plus haut dans cet article, lorsque l'utilisateur clique sur le bouton, le texte du bouton change. Le texte dépend du fait que l'utilisateur clique ou non. Réécrivez en utilisant useState() comme suit.

import React, { useState } from "react";
export default function  Button()  {
  const  [buttonText, setButtonText] =  useState("Click me,   please");
  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }
  return  <button  onClick={handleClick}>{buttonText}</button>;
}

Adresse de démonstration : https://codesandbox.io/s/nifty-waterfall-4i2dq

Dans le code ci-dessus, le composant Button est une fonction et useState est utilisé en interne () le hook introduit le statut.

useState() Cette fonction accepte la valeur initiale de l'état comme paramètre. Dans l'exemple ci-dessus, la valeur initiale est le texte du bouton. Cette fonction renvoie un tableau. Le premier membre du tableau est une variable (buttonText dans l'exemple ci-dessus) qui pointe vers la valeur actuelle de l'état. Le deuxième membre est une fonction utilisée pour mettre à jour l'état. La convention est le préfixe défini plus le nom de la variable de l'état (l'exemple ci-dessus est setButtonText).

useContext() : hook d'état partagé

Si vous avez besoin de partager l'état entre les composants, vous pouvez utiliser useContext().

Nous avons maintenant deux composants Navbar et Messages, et nous voulons partager l'état entre eux.

<div className="App">
  <Navbar/>
  <Messages/>
</div>

La première étape consiste à utiliser l'API React Context pour créer un Context en dehors du composant.

const AppContext = React.createContext({});

Le code d'encapsulation du composant est le suivant.

<AppContext.Provider value={{
  username: &#39;superawesome&#39;
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

Dans le code ci-dessus, AppContext.Provider fournit un objet Context, qui peut être partagé par des sous-composants.

Le code du composant Navbar est le suivant.

const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

Dans le code ci-dessus, la fonction hook useContext() est utilisée pour introduire l'objet Context et en obtenir l'attribut username.

Le code du composant Message est également similaire.

const Messages = () => {
  const { username } = useContext(AppContext)
  return (
    <div className="messages">
      <h1>Messages</h1>
      <p>1 message for {username}</p>
      <p className="message">useContext is awesome!</p>
    </div>
  )
}

démo : https://codesandbox.io/s/react-usecontext-redux-0bj1v

useReducer() : crochet d'action

React lui-même ne fournit pas de fonctionnalité de gestion d'état et nécessite généralement l'utilisation de bibliothèques externes. La bibliothèque la plus couramment utilisée pour cela est Redux.

Le concept de base de Redux est que les composants émettent des actions pour communiquer avec le gestionnaire d'état. Après avoir reçu l'action, le gestionnaire d'état utilise la fonction Réducteur pour calculer le nouvel état. La forme de la fonction Réducteur est (état, action) => newState.

le hook useReducers() est utilisé pour introduire la fonction Réducteur.

const [state, dispatch] = useReducer(reducer, initialState);

Ce qui précède est l'utilisation de base de useReducer(). Il accepte la fonction Réducteur et la valeur initiale de l'état comme paramètres et renvoie un tableau. Le premier membre du tableau est la valeur actuelle de l'état et le deuxième membre est la fonction de répartition qui envoie l'action.

Ce qui suit est un exemple de compteur. La fonction Réducteur utilisée pour calculer l’état est la suivante. Le code du composant

const myReducer = (state, action) => {
  switch(action.type)  {
    case('countUp'):
      return  {
        ...state,
        count: state.count + 1
      }
    default:
      return  state;
  }
}

est le suivant.

function App() {
  const [state, dispatch] = useReducer(myReducer, { count:   0 });
  return  (
    <div className="App">
      <button onClick={() => dispatch({ type: &#39;countUp&#39; })}>
        +1
      </button>
      <p>Count: {state.count}</p>
    </div>
  );
}

démo : https://codesandbox.io/s/react-usereducer-redux-xqlet

Étant donné que les Hooks peuvent fournir des fonctions d'état partagé et de réduction, il peut remplacer Redux dans ces aspects. Cependant, il ne peut pas fournir de middleware et de voyage dans le temps. Si vous avez besoin de ces deux fonctions, vous devez toujours utiliser Redux.

useEffect() : crochet d'effet secondaire

useEffect() est utilisé pour introduire des opérations avec des effets secondaires, la plus courante est de demander données du serveur. Le code précédemment placé dans composantDidMount peut désormais être placé dans useEffect().

useEffect() est utilisé comme suit.

useEffect(()  =>  {
  // Async Action
}, [dependencies])

上面用法中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。

下面看一个例子。

const Person = ({ personId }) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true); 
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId])
  if (loading === true) {
    return <p>Loading ...</p>
  }
  return <div>
    <p>You&#39;re viewing: {person.name}</p>
    <p>Height: {person.height}</p>
    <p>Mass: {person.mass}</p>
  </div>
}

上面代码中，每当组件参数personId发生变化，useEffect()就会执行。组件第一次渲染时，useEffect()也会执行。

demo：https://codesandbox.io/s/react-useeffect-redux-9t3bg

创建自己的 Hooks

上例的 Hooks 代码还可以封装起来，变成一个自定义的 Hook，便于共享。

const usePerson = (personId) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true);
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId]);  
  return [loading, person];
};

上面代码中，usePerson()就是一个自定义的 Hook。

Person 组件就改用这个新的钩子，引入封装的逻辑。

const Person = ({ personId }) => {
  const [loading, person] = usePerson(personId);
  if (loading === true) {
    return <p>Loading ...</p>;
  }
  return (
    <div>
      <p>You&#39;re viewing: {person.name}</p>
      <p>Height: {person.height}</p>
      <p>Mass: {person.mass}</p>
    </div>
  );
};

demo：https://codesandbox.io/s/react-useeffect-redux-ghl7c

更多编程相关知识，请访问：编程学习网站！！

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!