Cet article vous donnera une compréhension approfondie de React Hooks !-js tutoriel-php.cn

Connaissez-vous les Hooks dans React ? Cet article vous donnera une compréhension approfondie de React Hooks. J'espère qu'il vous sera utile !

Cet article vous donnera une compréhension approfondie de React Hooks !

Préface

Les hooks sont utilisés pour utiliser l'état et d'autres fonctionnalités de React sans écrire de classes. Alors, que sont exactement les Hooks, pourquoi devrions-nous utiliser les Hooks, quels Hooks courants propose React et comment personnaliser les Hooks. Ce qui suit vous les révélera un par un. [Recommandations associées : Tutoriel vidéo Redis]

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

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

Simplifier la réutilisation logique
Rendre les composants complexes plus faciles à comprendre ;

1. Simplifier la réutilisation logique

Avant l'émergence 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 les composants d'ordre élevé produisaient des nœuds de composants redondants. , rendant le débogage plus complexe.

Les Hooks nous permettent de réutiliser la logique d'état sans modifier la structure des composants. L'utilisation des Hooks personnalisés sera présentée en détail ci-dessous.

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.

4. Hooks couramment utilisés

1. useState

useState est un Hook qui vous permet d'ajouter un état dans les composants de la fonction React.

Les exemples d'utilisation sont les suivants :

import React, { useState } from &#39;react&#39;;

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
  // ...

Copier après la connexion

Le code ci-dessus déclare un nombre de variables d'état avec une valeur initiale de 0 et met à jour le nombre actuel en appelant setCount.

2. useEffect

useEffect vous permet d'effectuer des opérations d'effets secondaires dans les composants de fonction.

Les effets secondaires font référence à un morceau de code qui n'a rien à voir avec les résultats d'exécution actuels. Les opérations d'effets secondaires courants incluent l'acquisition de données, la définition d'abonnements et la modification manuelle du DOM dans les composants React.

useEffect peut recevoir deux paramètres, le code est le suivant :

useEffect(callback, dependencies)

Copier après la connexion

Le premier paramètre est le rappel de fonction à exécuter, et le deuxième paramètre est les dépendances facultatives du tableau de dépendances.

La dépendance est facultative. Si elle n'est pas spécifiée, le rappel sera exécuté après l'exécution de chaque composant de fonction ; s'il est spécifié, il ne sera exécuté que lorsque la valeur de la dépendance change.

Les exemples d'utilisation sont les suivants :

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;

    return () => {
        // 可用于做清除，相当于 class 组件的 componentWillUnmount
    }

  }, [count]); // 指定依赖项为 count，在 count 更新时执行该副作用
  // ...

Copier après la connexion

Le code ci-dessus utilise useEffect pour implémenter lorsque le nombre de dépendances est mis à jour, la fonction d'effet secondaire est exécutée et le résultat de la dernière exécution est effacé en renvoyant la fonction de rappel.

De plus, useEffect fournit quatre timings pour l'exécution des effets secondaires :

Exécuter après chaque rendu : Le deuxième paramètre de dépendance n'est pas fourni. Par exemple, useEffect(() => {});
Exécuté uniquement après le premier rendu : fournissez un tableau vide en tant que dépendance. Par exemple, useEffect(() => {}, []);
Exécuté pour la première fois et après le changement des dépendances : fournissez un tableau de dépendances. Par exemple, useEffect(() => {}, [deps]);
Exécuter après démontage du composant : renvoie une fonction de rappel. Par exemple useEffect() => { return () => {} }, []).

3. useCallback

La fonction de rappel définie par useCallback ne redéclarera la fonction de rappel que lorsque les dépendances changent, garantissant ainsi que le composant ne créera pas de fonctions de rappel en double . Et le composant qui reçoit cette fonction de rappel en tant qu'attribut n'aura pas besoin d'être restitué fréquemment. Les exemples d'utilisation sont les suivants :

const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])

Copier après la connexion

Le code ci-dessus ne redéclarera la fonction de rappel que lorsque les dépendances a et b changent.

4. useMemo

La fonction de création définie par useMemo ne sera recalculée que lorsqu'une dépendance change, ce qui permet de

ne pas répéter les calculs coûteux

à chaque fois qu'elle est rendue et de recevoir cette valeur calculée. Des composants qui sont également des propriétés. n'ont pas besoin d'être restitués fréquemment. Les exemples d'utilisation sont les suivants :

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

Copier après la connexion

Le code ci-dessus ne sera recalculé que lorsque les dépendances a et b changent.

5. useRef

useRef renvoie un objet ref qui persiste tout au long du cycle de vie du composant. Il a 2 utilisations :

保存 DOM 节点的引用；
在多次渲染之间共享数据。

保存 DOM 节点的引入使用示例如下：

function TextInputWithFocusButton() {
  const inputEl = useRef(null)
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus()
  }
  return (
    <>
      <input ref={inputEl} type=&#39;text&#39; />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  )
}

Copier après la connexion

以上代码通过 useRef 创建了 ref 对象，保存了 DOM 节点的引用，可以对 ref.current 做 DOM 操作。

在多次渲染之间共享数据示例如下：

import React, { useState, useCallback, useRef } from &#39;react&#39;

export default function Timer() {
  // 定义 time state 用于保存计时的累积时间
  const [time, setTime] = useState(0)

  // 定义 timer 这样一个容器用于在跨组件渲染之间保存一个变量
  const timer = useRef(null)

  // 开始计时的事件处理函数
  const handleStart = useCallback(() => {
    // 使用 current 属性设置 ref 的值
    timer.current = window.setInterval(() => {
      setTime((time) => time + 1)
    }, 100)
  }, [])

  // 暂停计时的事件处理函数
  const handlePause = useCallback(() => {
    // 使用 clearInterval 来停止计时
    window.clearInterval(timer.current)
    timer.current = null
  }, [])

  return (
    <div>
      {time / 10} seconds.
      <br />
      <button onClick={handleStart}>Start</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  )
}

Copier après la connexion

以上代码通过 useRef 创建了一个变量名为 timer 的 ref 对象，该对象可以在跨组件渲染时调用，在开始计时时新建计时器，在暂停计时时清空计时器。

6. useContext

useContext 用于接收一个 context 对象并返回该 context 的值，可以实现跨层级的数据共享。

示例如下：

// 创建一个 context 对象
const MyContext = React.createContext(initialValue)
function App() {
  return (
    // 通过 Context.Provider 传递 context 的值
    <MyContext.Provider value=&#39;1&#39;>
      <Container />
    </MyContext.Provider>
  )
}

function Container() {
  return <Test />
}

function Test() {
  // 获取 Context 的值
  const theme = useContext(MyContext) // 1
  return <div></div>
}

Copier après la connexion

以上代码通过 useContext 取得了 App 组件中定义的 Context，做到了跨层次组件的数据共享。

7. useReducer

useReducer 用来引入 Reducer 功能。

示例如下：

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

Copier après la connexion

它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的 dispatch 函数。

五、自定义 Hooks

通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。

1. 如何创建自定义 Hooks？

自定义 Hooks 就是函数，它有 2 个特征区分于普通函数：

名称以 “use” 开头；
函数内部调用其他的 Hook。

示例如下：

import { useState, useCallback } from &#39;react&#39;

function useCounter() {
  // 定义 count 这个 state 用于保存当前数值
  const [count, setCount] = useState(0)
  // 实现加 1 的操作
  const increment = useCallback(() => setCount(count + 1), [count])
  // 实现减 1 的操作
  const decrement = useCallback(() => setCount(count - 1), [count])
  // 重置计数器
  const reset = useCallback(() => setCount(0), [])

  // 将业务逻辑的操作 export 出去供调用者使用
  return { count, increment, decrement, reset }
}

// 组件1
function MyComponent1() {
  const { count, increment, decrement, reset } = useCounter()
}

// 组件2
function MyComponent2() {
  const { count, increment, decrement, reset } = useCounter()
}

Copier après la connexion

以上代码通过自定义 Hooks useCounter，轻松的在 MyComponent1 组件和 MyComponent2 组件之间复用业务逻辑。